Throw for bindings in tag-name position (#2071)

.changeset/rare-guests-drive.md

@@ -0,0 +1,5 @@
+---
+'lit-html': patch
+---
+
+In dev mode, throw for tag name bindings. These should use static templates.

packages/lit-html/src/lit-html.ts

@@ -537,7 +537,12 @@ const getTemplateHtml = (
           }
           regex = tagEndRegex;
         } else if (match[DYNAMIC_TAG_NAME] !== undefined) {
-          // dynamic tag name
+          if (DEV_MODE) {
+            throw new Error(
+              'Bindings in tag names are not supported. Please use static templates instead. ' +
+                'See https://lit.dev/docs/templates/expressions/#static-expressions'
+            );
+          }
           regex = tagEndRegex;
         }
       } else if (regex === tagEndRegex) {

packages/lit-html/src/test/lit-html_test.ts

@@ -412,21 +412,31 @@ suite('lit-html', () => {
     });
 
     test('"dynamic" tag name', () => {
-      render(html`<${'A'}></${'A'}>`, container);
-      assert.equal(stripExpressionMarkers(container.innerHTML), '<></>');
+      const template = html`<${'A'}></${'A'}>`;
+      if (DEV_MODE) {
+        assert.throws(() => {
+          render(template, container);
+        });
+      } else {
+        render(template, container);
+        assert.equal(stripExpressionMarkers(container.innerHTML), '<></>');
+      }
     });
 
     test('malformed "dynamic" tag name', () => {
       // `</ ` starts a comment
-      render(html`<${'A'}></ ${'A'}>`, container);
-      assert.equal(
-        stripExpressionMarkers(container.innerHTML),
-        '<><!-- --></>'
-      );
-
-      // Currently fails:
-      // render(html`<${'A'}></ ${'A'}>${'B'}`, container);
-      // assert.equal(stripExpressionMarkers(container.innerHTML), '<><!-- -->B</>');
+      const template = html`<${'A'}></ ${'A'}>`;
+      if (DEV_MODE) {
+        assert.throws(() => {
+          render(template, container);
+        });
+      } else {
+        render(template, container);
+        assert.equal(
+          stripExpressionMarkers(container.innerHTML),
+          '<><!-- --></>'
+        );
+      }
     });
 
     test('binding after end tag name', () => {