From 2c29a10c0c1fbc77101a31ce1124bc0949412a4b Mon Sep 17 00:00:00 2001
From: Andrew Seier <andseier@gmail.com>
Date: Mon, 16 Dec 2024 09:58:04 -0800
Subject: [PATCH] Updates demo styles and improves error messages.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes:
* Uses `static get styles()` for demo / test elements. †
* Uses brackets in error messaging — e.g., “<style>” vs “"style"”. ††

†  Inlining style tags will throw a warning in future releases. And, the
   suggested usage is to leverage the static `styles` getter.
†† Rather than use quotes when messaging about tag names, it provides
   developers better context to see messaging that resembles open tags
   so that it’s clear what the error message is all about.
---
 demo/chess/index.js              | 121 +++++++------
 demo/index.js                    |  71 ++++----
 test/test-computed-properties.js |  45 ++---
 test/test-observed-properties.js |  31 ++--
 test/test-template-engine.js     | 296 ++++++++++++++++++++++++++-----
 x-template.js                    |   4 +-
 6 files changed, 396 insertions(+), 172 deletions(-)

diff --git a/demo/chess/index.js b/demo/chess/index.js
index 59ea119..73bd6db 100644
--- a/demo/chess/index.js
+++ b/demo/chess/index.js
@@ -1,6 +1,67 @@
 import XElement from '../../x-element.js';
 
 class ChessPieceElement extends XElement {
+  static get styles() {
+    const styleSheet = new CSSStyleSheet();
+    styleSheet.replaceSync(`\
+      :host {
+        display: block;
+        width: var(--hello-size, 8rem);
+        height: var(--hello-size, 8rem);
+        background-color: cyan;
+        border-radius: 50%;
+        margin: 0.25rem;
+        box-sizing: border-box;
+        transition-duration: 250ms;
+        transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
+        transition-property: transform, border;
+        will-change: transform;
+        cursor: pointer;
+      }
+      
+      #container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        font-size: calc(var(--hello-size, 8rem) * calc(5/11));
+      }
+      
+      :host([rank="\\2655"]) {
+        border: 4px dotted hsl(120, 100%, 50%);
+        background-color: yellow;
+        transform: rotateX(15deg) rotateY(15deg);
+      }
+      
+      :host([rank="\\2654"]) {
+        border: 3px solid hsl(270, 100%, 50%);
+        background-color: magenta;
+        color: blue;
+        transform: rotateX(-10deg) rotateY(-15deg);
+      }
+      
+      :host(:not([rank])),
+      :host([rank=""]) {
+        background-color: #ccc;
+      }
+      
+      :host(:hover) {
+        border: 3px solid hsl(180, 100%, 50%);
+        transform: translateZ(-25px);
+      }
+      
+      :host(:focus) {
+        border: 12px solid hsl(90, 100%, 50%);
+        outline: none;
+      }
+      
+      #container:empty::before {
+        content: '\\265F';
+      }
+    `);
+    return [styleSheet];
+  }
+
   static get properties() {
     return {
       rank: {
@@ -17,65 +78,7 @@ class ChessPieceElement extends XElement {
 
   static template(html) {
     return ({ rank }) => {
-      return html`
-        <style>
-          :host {
-            display: block;
-            width: var(--hello-size, 8rem);
-            height: var(--hello-size, 8rem);
-            background-color: cyan;
-            border-radius: 50%;
-            margin: 0.25rem;
-            box-sizing: border-box;
-            transition-duration: 250ms;
-            transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-            transition-property: transform, border;
-            will-change: transform;
-            cursor: pointer;
-          }
-          
-          #container {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            font-size: calc(var(--hello-size, 8rem) * calc(5/11));
-          }
-          
-          :host([rank="\u2655"]) {
-            border: 4px dotted hsl(120, 100%, 50%);
-            background-color: yellow;
-            transform: rotateX(15deg) rotateY(15deg);
-          }
-          
-          :host([rank="\u2654"]) {
-            border: 3px solid hsl(270, 100%, 50%);
-            background-color: magenta;
-            color: blue;
-            transform: rotateX(-10deg) rotateY(-15deg);
-          }
-          
-          :host(:not([rank])),
-          :host([rank=""]) {
-            background-color: #ccc;
-          }
-          
-          :host(:hover) {
-            border: 3px solid hsl(180, 100%, 50%);
-            transform: translateZ(-25px);
-          }
-          
-          :host(:focus) {
-            border: 12px solid hsl(90, 100%, 50%);
-            outline: none;
-          }
-          
-          #container:empty::before {
-            content: '\u265F';
-          }
-        </style>
-        <div id="container">${rank}</div>
-      `;
+      return html`<div id="container">${rank}</div>`;
     };
   }
 }
diff --git a/demo/index.js b/demo/index.js
index 77bfb68..5eff270 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -9,42 +9,45 @@ const logo = `\
 `;
 
 class HelloElement extends XElement {
-  static template(html) {
-    return () => {
-      return html`
-        <style>
-          :host {
-            display: contents;
-          }
+  static get styles() {
+    const styleSheet = new CSSStyleSheet();
+    styleSheet.replaceSync(`\
+      :host {
+        display: contents;
+      }
+
+      #container {
+        position: fixed;
+        --width: 150px;
+        --height: 150px;
+        --font-size: 13px;
+        font-weight: bold;
+        line-height: calc(var(--font-size) * 1.8);
+        font-size: var(--font-size);
+        top: calc(0px - var(--width) / 2);
+        left: calc(0px - var(--height) / 2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--width);
+        height: var(--height);
+        transform: translate(calc(0vw - var(--width)), 50vh) rotate(0deg);
+        opacity: 1;
+        transform-origin: center;
+        border-radius: 100vmax;
+        cursor: default;
+      }
 
-          #container {
-            position: fixed;
-            --width: 150px;
-            --height: 150px;
-            --font-size: 13px;
-            font-weight: bold;
-            line-height: calc(var(--font-size) * 1.8);
-            font-size: var(--font-size);
-            top: calc(0px - var(--width) / 2);
-            left: calc(0px - var(--height) / 2);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: var(--width);
-            height: var(--height);
-            transform: translate(calc(0vw - var(--width)), 50vh) rotate(0deg);
-            opacity: 1;
-            transform-origin: center;
-            border-radius: 100vmax;
-            cursor: default;
-          }
+      #logo {
+        padding-bottom: var(--font-size);
+      }
+    `);
+    return [styleSheet];
+  }
 
-          #logo {
-            padding-bottom: var(--font-size);
-          }
-        </style>
-        <div id="container"><pre id="logo">${logo}</pre></div>
-      `;
+  static template(html) {
+    return () => {
+      return html`<div id="container"><pre id="logo">${logo}</pre></div>`;
     };
   }
 
diff --git a/test/test-computed-properties.js b/test/test-computed-properties.js
index 869590d..241ede9 100644
--- a/test/test-computed-properties.js
+++ b/test/test-computed-properties.js
@@ -4,6 +4,29 @@ import { it, assert } from './x-test.js';
 let _count = 0;
 
 class TestElement extends XElement {
+  static get styles() {
+    const styleSheet = new CSSStyleSheet();
+    styleSheet.replaceSync(`\
+      #calculation {
+        background-color: lightgreen;
+        padding: 10px;
+      }
+
+      :host([negative]) #calculation {
+        background-color: lightcoral;
+      }
+
+      :host([underline]) #calculation {
+        text-decoration: underline;
+      }
+
+      :host([italic]) #calculation {
+        font-style: italic;
+      }
+    `);
+    return [styleSheet];
+  }
+
   static get properties() {
     return {
       c: {
@@ -84,27 +107,7 @@ class TestElement extends XElement {
 
   static template(html) {
     return ({ a, b, c }) => {
-      return html`
-        <style>
-          #calculation {
-            background-color: lightgreen;
-            padding: 10px;
-          }
-
-          :host([negative]) #calculation {
-            background-color: lightcoral;
-          }
-
-          :host([underline]) #calculation {
-            text-decoration: underline;
-          }
-
-          :host([italic]) #calculation {
-            font-style: italic;
-          }
-        </style>
-        <span id="calculation">${a} + ${b} = ${c}</span>
-      `;
+      return html`<span id="calculation">${a} + ${b} = ${c}</span>`;
     };
   }
 }
diff --git a/test/test-observed-properties.js b/test/test-observed-properties.js
index c583b4c..86172fe 100644
--- a/test/test-observed-properties.js
+++ b/test/test-observed-properties.js
@@ -2,6 +2,24 @@ import XElement from '../x-element.js';
 import { assert, it } from './x-test.js';
 
 class TestElement extends XElement {
+  static get styles() {
+    const styleSheet = new CSSStyleSheet();
+    styleSheet.replaceSync(`\
+      :host #container {
+        transition-property: box-shadow;
+        transition-duration: 300ms;
+        transition-timing-function: linear;
+        box-shadow: 0 0 0 1px black;
+        padding: 10px;
+      }
+
+      :host([popped]) #container {
+        box-shadow: 0 0 10px 0 black;
+      }
+    `);
+    return [styleSheet];
+  }
+
   static get properties() {
     return {
       a: {
@@ -64,19 +82,6 @@ class TestElement extends XElement {
   static template(html) {
     return ({ changes }) => {
       return html`
-        <style>
-          :host #container {
-            transition-property: box-shadow;
-            transition-duration: 300ms;
-            transition-timing-function: linear;
-            box-shadow: 0 0 0 1px black;
-            padding: 10px;
-          }
-
-          :host([popped]) #container {
-            box-shadow: 0 0 10px 0 black;
-          }
-        </style>
         <div id="container">
           <div>Changes:</div>
           <ul>
diff --git a/test/test-template-engine.js b/test/test-template-engine.js
index a4bd914..d257935 100644
--- a/test/test-template-engine.js
+++ b/test/test-template-engine.js
@@ -1099,7 +1099,7 @@ describe('html errors', () => {
         div { background-color: ${'red'}; }
       </style>
     `;
-    const expectedMessage = 'Interpolation of "style" tags is not allowed.';
+    const expectedMessage = 'Interpolation of <style> tags is not allowed.';
     assertThrows(callback, expectedMessage);
   });
 
@@ -1110,31 +1110,55 @@ describe('html errors', () => {
         console.log('${evil}');
       </script>
     `;
-    const expectedMessage = 'Interpolation of "script" tags is not allowed.';
+    const expectedMessage = 'Interpolation of <script> tags is not allowed.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws when attempting non-trivial interpolation of a textarea tag (preceding space)', () => {
+    const callback = () => html`<textarea id="target"> ${'foo'}</textarea>`;
+    const expectedMessage = 'Only basic interpolation of <textarea> tags is allowed.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws when attempting non-trivial interpolation of a textarea tag (succeeding space)', () => {
+    const callback = () => html`<textarea id="target">${'foo'} </textarea>`;
+    const expectedMessage = 'Only basic interpolation of <textarea> tags is allowed.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws when attempting non-trivial interpolation of a textarea tag', () => {
     const callback = () => html`<textarea id="target">please ${'foo'} no</textarea>`;
-    const expectedMessage = 'Only basic interpolation of "textarea" tags is allowed.';
+    const expectedMessage = 'Only basic interpolation of <textarea> tags is allowed.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws when attempting non-trivial interpolation of a textarea tag via nesting', () => {
     const callback = () => html`<textarea id="target"><b>please ${'foo'} no</b></textarea>`;
-    const expectedMessage = 'Only basic interpolation of "textarea" tags is allowed.';
+    const expectedMessage = 'Only basic interpolation of <textarea> tags is allowed.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws when attempting non-trivial interpolation of a title tag (preceding space)', () => {
+    const callback = () => html`<title> ${'foo'}</title>`;
+    const expectedMessage = 'Only basic interpolation of <title> tags is allowed.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws when attempting non-trivial interpolation of a title tag (succeeding space)', () => {
+    const callback = () => html`<title>${'foo'} </title>`;
+    const expectedMessage = 'Only basic interpolation of <title> tags is allowed.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws when attempting non-trivial interpolation of a title tag', () => {
     const callback = () => html`<title>please ${'foo'} no</title>`;
-    const expectedMessage = 'Only basic interpolation of "title" tags is allowed.';
+    const expectedMessage = 'Only basic interpolation of <title> tags is allowed.';
     assertThrows(callback, expectedMessage);
   });
 
-  it('throws when attempting non-trivial interpolation of a title tag via nesting', () => {
-    const callback = () => html`<title><b>please ${'foo'} no</b></title>`;
-    const expectedMessage = 'Only basic interpolation of "title" tags is allowed.';
+  it('throws when attempting non-trivial interpolation of a textarea tag via nesting', () => {
+    const callback = () => html`<textarea><b>please ${'foo'} no</b></textarea>`;
+    const expectedMessage = 'Only basic interpolation of <textarea> tags is allowed.';
     assertThrows(callback, expectedMessage);
   });
 
@@ -1193,177 +1217,239 @@ describe.todo('future html errors', () => {
     // At one point, we only threw the _first_ time we encountered a given
     //  tagged template function “strings” array. We want to throw always.
     const callback = () => html`<-div></-div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed open start tag — tag names must be alphanumeric, lowercase, cannot start or end with hyphens, and cannot start with a number. See substring `<-div></-d…`. Your HTML was parsed through: ``.';
     assertThrows(callback, expectedMessage);
     assertThrows(callback, expectedMessage);
     assertThrows(callback, expectedMessage);
   });
 
+  it('throws correct message for complex template', () => {
+    // Just creating a more complex test to make sure nothing is missed. Many
+    //  of the other tests have errors within the first string of the “strings”
+    //  array, for example.
+    const callback = () => html`
+      <div id="container">
+        <span class="${'hello'}">${'hello'}</span>
+        <span id="name" _foo>${'world'}</span>
+      </div>
+    `;
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `_foo>`. Your HTML was parsed through: `\n      <div id="container">\n        <span class="${…}">${…}</span>\n        <span id="name" `.';
+    assertThrows(callback, expectedMessage);
+  });
+
   it('throws if open tag starts with a hyphen', () => {
     const callback = () => html`<-div></-div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed open start tag — tag names must be alphanumeric, lowercase, cannot start or end with hyphens, and cannot start with a number. See substring `<-div></-d…`. Your HTML was parsed through: ``.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if open tag starts with a number', () => {
-    const callback = () => html`<3h></3h>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const callback = () => html`<3h-></3h->`;
+    const expectedMessage = 'Seems like you have a malformed open start tag — tag names must be alphanumeric, lowercase, cannot start or end with hyphens, and cannot start with a number. See substring `<3h-></3h-…`. Your HTML was parsed through: ``.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if open tag ends in a hyphen', () => {
     const callback = () => html`<div-></div->`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed open start tag — tag names must be alphanumeric, lowercase, cannot start or end with hyphens, and cannot start with a number. See substring `<div-></di…`. Your HTML was parsed through: ``.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if you give a tag name with capital letters', () => {
     const callback = () => html`<Div></Div>`;
-    const expectedMessage = 'Seems like you have a malformed open start tag — tag names must be alphanumeric, lowercase, cannot start or end with hyphens, and cannot start with a number. See substring `<Div></Div…`. Your HTML is only perfect through: ``.';
+    const expectedMessage = 'Seems like you have a malformed open start tag — tag names must be alphanumeric, lowercase, cannot start or end with hyphens, and cannot start with a number. See substring `<Div></Div…`. Your HTML was parsed through: ``.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws if an open tag has a trailing space before the ">" character', () => {
+    const callback = () => html`<div foo ></div>`;
+    const expectedMessage = 'Seems like you have a malformed end to an opening tag — opening tags must close without any extraneous spaces or newlines. See substring `></div>`. Your HTML was parsed through: `<div foo `.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws if an open tag has a trailing newline before the ">" character', () => {
+    const callback = () => html`<div foo\n></div>`;
+    const expectedMessage = 'Seems like you have a malformed end to an opening tag — opening tags must close without any extraneous spaces or newlines. See substring `></div>`. Your HTML was parsed through: `<div foo\n`.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws if an open tag has a slash before the ">" character', () => {
+    const callback = () => html`<input foo/>`;
+    const expectedMessage = 'Substring `foo/>` failed after an open tag space state. Your HTML was parsed through: `<input `.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws if an open tag has a space-slash before the ">" character', () => {
+    const callback = () => html`<input foo />`;
+    const expectedMessage = 'Seems like you have a malformed end to an opening tag — opening tags must close without any extraneous spaces or newlines. See substring `/>`. Your HTML was parsed through: `<input foo `.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws if a close tag has a space after the "<" characters', () => {
+    const callback = () => html`<div>< /div>`;
+    const expectedMessage = 'Seems like you have a malformed close tag — close tags must not contain any extraneous spaces or newlines and tag names must be alphanumeric, lowercase, cannot start or end with hyphens, and cannot start with a number. See substring `< /div>`. Your HTML was parsed through: `<div>`.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws if a close tag has a space after the "</" characters', () => {
+    const callback = () => html`<div></ div>`;
+    const expectedMessage = 'Seems like you have a malformed close tag — close tags must not contain any extraneous spaces or newlines and tag names must be alphanumeric, lowercase, cannot start or end with hyphens, and cannot start with a number. See substring `</ div>`. Your HTML was parsed through: `<div>`.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws if a close tag has a space before the ">" characters', () => {
+    const callback = () => html`<div></div >`;
+    const expectedMessage = 'Seems like you have a malformed close tag — close tags must not contain any extraneous spaces or newlines and tag names must be alphanumeric, lowercase, cannot start or end with hyphens, and cannot start with a number. See substring `</div >`. Your HTML was parsed through: `<div>`.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws if a close tag name ends with a hyphen', () => {
+    const callback = () => html`<div></div->`;
+    const expectedMessage = 'Seems like you have a malformed close tag — close tags must not contain any extraneous spaces or newlines and tag names must be alphanumeric, lowercase, cannot start or end with hyphens, and cannot start with a number. See substring `</div->`. Your HTML was parsed through: `<div>`.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if an unbound boolean attribute starts with a hyphen', () => {
     const callback = () => html`<div -what></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `-what></di…`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if an unbound boolean attribute starts with a number', () => {
     const callback = () => html`<div 9what></div>`;
-    const expectedMessage =  'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `9what></di…`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if an unbound boolean attribute starts with a capital letter', () => {
     const callback = () => html`<div What></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `What></div…`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if an unbound boolean attribute ends with a hyphen', () => {
     const callback = () => html`<div what-></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `what-></di…`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if an unbound attribute starts with a hyphen', () => {
     const callback = () => html`<div -what="no"></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `-what="no"…`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if an unbound attribute starts with a number', () => {
     const callback = () => html`<div 5what="no"></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `5what="no"…`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if an unbound attribute starts with a capital letter', () => {
     const callback = () => html`<div No="no"></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `No="no"></…`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if an unbound attribute ends with a hyphen', () => {
     const callback = () => html`<div what-="no"></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `what-="no"…`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if a bound boolean attribute starts with a hyphen', () => {
     const callback = () => html`<div ?-what="${''}"></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `?-what="`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if a bound boolean attribute starts with a number', () => {
     const callback = () => html`<div ?3what="${''}"></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `?3what="`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if a bound boolean attribute starts with a capital letter', () => {
     const callback = () => html`<div ?Yak="${''}"></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `?Yak="`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if a bound boolean attribute ends with a hyphen', () => {
     const callback = () => html`<div ?what-="${''}"></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `?what-="`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if a bound defined attribute starts with a hyphen', () => {
     const callback = () => html`<div ??-what="${''}"></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `??-what="`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if a bound defined attribute starts with a number', () => {
     const callback = () => html`<div ??3what="${''}"></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `??3what="`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if a bound defined attribute starts with a capital letter', () => {
     const callback = () => html`<div ??Yak="${''}"></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `??Yak="`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if a bound defined attribute ends with a hyphen', () => {
     const callback = () => html`<div ??what-="${''}"></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `??what-="`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if a bound attribute starts with a hyphen', () => {
     const callback = () => html`<div -what="${''}"></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `-what="`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if a bound attribute starts with a number', () => {
     const callback = () => html`<div 3what="${''}"></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `3what="`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if a bound attribute starts with a capital letter', () => {
     const callback = () => html`<div Yak="${''}"></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `Yak="`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if a bound attribute ends with a hyphen', () => {
     const callback = () => html`<div what-="${''}"></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed attribute — attribute names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with hyphens, and cannot start with a number — and, attribute values must be enclosed in double-quotes. See substring `what-="`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if a bound property starts with an underscore', () => {
     const callback = () => html`<div ._what="${''}"></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed property — property names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with underscores, and cannot start with a number — and, property values must be enclosed in double-quotes. See substring `._what="`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if a bound property starts with a number', () => {
     const callback = () => html`<div .3what="${''}"></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed property — property names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with underscores, and cannot start with a number — and, property values must be enclosed in double-quotes. See substring `.3what="`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if a bound property starts with a capital letter', () => {
     const callback = () => html`<div .Yak="${''}"></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed property — property names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with underscores, and cannot start with a number — and, property values must be enclosed in double-quotes. See substring `.Yak="`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws if a bound property ends with an underscore', () => {
     const callback = () => html`<div .what_="${''}"></div>`;
-    const expectedMessage = 'TODO — Write a better error message!';
+    const expectedMessage = 'Seems like you have a malformed property — property names must be alphanumeric (both uppercase and lowercase is allowed), must not start or end with underscores, and cannot start with a number — and, property values must be enclosed in double-quotes. See substring `.what_="`. Your HTML was parsed through: `<div `.';
     assertThrows(callback, expectedMessage);
   });
 
@@ -1373,33 +1459,157 @@ describe.todo('future html errors', () => {
     assertThrows(callback, expectedMessage);
   });
 
+  it('throws if you mismatch a close a tag', () => {
+    const callback = () => html`<div></span>`;
+    const expectedMessage = 'Closing tag </span> does not match <div>. Your HTML was parsed through: `<div>`.';
+    assertThrows(callback, expectedMessage);
+  });
+
   it('throws for trying to write unicode in a js-y format', () => {
     const callback = () => html`<div>please no\u2026</div>`;
-    const expectedMessage = 'No JS unicode characters!';
+    const expectedMessage = 'Found a unicode or hexadecimal encoding (\\x or \\u) in raw string input. Only valid HTML entities are supported in html. This is the raw string leading up to the issue `<div>please no\\u`.';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws for ambiguous ampersands', () => {
     const callback = () => html`<div>please &a no</div>`;
-    const expectedMessage = 'TODO: Weird HTML entity!';
+    const expectedMessage = 'Seems like you have a malformed hexadecimal character reference (html entity). You will need to fix the reference in this content "please &a no".';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws for malformed, named html entities', () => {
     const callback = () => html`<div>please &notathing; no</div>`;
-    const expectedMessage = 'TODO: Other case — weird HTML entity!';
+    const expectedMessage = 'Seems like you have provided a named character reference (html entity) which is not supported. You will need to redefine this following reference as a decimal or hexadecimal number "&notathing;".';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws for malformed decimal html entities', () => {
     const callback = () => html`<div>please &#129872342364298374982374982374623492873498273498237498723984723432455234523543; no</div>`;
-    const expectedMessage = 'TODO: Malformed decimal entity!';
+    const expectedMessage = 'Seems like you have a malformed decimal character reference (html entity). You will need to fix the reference "&#129872342364298374982374982374623492873498273498237498723984723432455234523543;".';
     assertThrows(callback, expectedMessage);
   });
 
   it('throws for malformed hexadecimal html entities', () => {
     const callback = () => html`<div>please &#x129872342364298374982374982374623492873498273498237498723984723432455234523543; no</div>`;
-    const expectedMessage = 'TODO: Malformed hexadecimal entity!';
+    const expectedMessage = 'Seems like you have a malformed hexadecimal character reference (html entity). You will need to fix the reference "&#x129872342364298374982374982374623492873498273498237498723984723432455234523543;".';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws for malformed comment because it starts with a ">" character', () => {
+    const callback = () => html`<!-->do not start with that character-->`;
+    const expectedMessage = 'Found malformed html comment. Comments cannot start with a ">" character or "->" characters. They cannot include a set of "--" characters. They cannot end with a "-" character.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws for malformed comment because it starts with "->" characters', () => {
+    const callback = () => html`<!--->do not start with those characters-->`;
+    const expectedMessage = 'Found malformed html comment. Comments cannot start with a ">" character or "->" characters. They cannot include a set of "--" characters. They cannot end with a "-" character.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws for malformed comment because it has "--" characters', () => {
+    const callback = () => html`<!--do not use "--" in a comment-->`;
+    const expectedMessage = 'Found malformed html comment. Comments cannot start with a ">" character or "->" characters. They cannot include a set of "--" characters. They cannot end with a "-" character.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws for malformed comment because it ends with a "-" character', () => {
+    const callback = () => html`<!--do not end with this character--->`;
+    const expectedMessage = 'Found malformed html comment. Comments cannot start with a ">" character or "->" characters. They cannot include a set of "--" characters. They cannot end with a "-" character.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws for forbidden <html> tag', () => {
+    const callback = () => html`<html>`;
+    const expectedMessage = 'The <html> html element is forbidden.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws for forbidden <head> tag', () => {
+    const callback = () => html`<head>`;
+    const expectedMessage = 'The <head> html element is forbidden.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws for forbidden <body> tag', () => {
+    const callback = () => html`<body>`;
+    const expectedMessage = 'The <body> html element is forbidden.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws for forbidden <base> tag', () => {
+    const callback = () => html`<base>`;
+    const expectedMessage = 'The <base> html element is forbidden.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws for forbidden <link> tag', () => {
+    const callback = () => html`<link>`;
+    const expectedMessage = 'The <link> html element is forbidden.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws for forbidden <meta> tag', () => {
+    const callback = () => html`<meta>`;
+    const expectedMessage = 'The <meta> html element is forbidden.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws for forbidden <title> tag', () => {
+    const callback = () => html`<title>`;
+    const expectedMessage = 'The <title> html element is forbidden.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws for forbidden <script> tag', () => {
+    const callback = () => html`<script></script>`;
+    const expectedMessage = 'The <script> html element is forbidden.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws for forbidden <noscript> tag', () => {
+    const callback = () => html`<noscript>`;
+    const expectedMessage = 'The <noscript> html element is forbidden.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws for forbidden <canvas> tag', () => {
+    const callback = () => html`<canvas>`;
+    const expectedMessage = 'The <canvas> html element is forbidden.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws for declarative shadow roots', () => {
+    const callback = () => html`<template shadowrootmode="open">`;
+    const expectedMessage = 'Declarative shadow roots are not yet supported (e.g., <template shadowrootmode="open">).';
+    assertThrows(callback, expectedMessage);
+  });
+});
+
+// We plan to investigate adding additional restrictions on svg to improve
+//  developer feedback in the future if the performance and complexity costs
+//  aren’t too high.
+describe.todo('future svg errors', () => {
+  it('throws for forbidden <style> tag', () => {
+    const callback = () => svg`<style>`;
+    const expectedMessage = 'The <style> svg element is forbidden.';
+    assertThrows(callback, expectedMessage);
+  });
+
+  it('throws for forbidden <script> tag', () => {
+    const callback = () => svg`<script>`;
+    const expectedMessage = 'The <script> svg element is forbidden.';
+    assertThrows(callback, expectedMessage);
+  });
+});
+
+// We plan to investigate adding additional restrictions on math to improve
+//  developer feedback in the future if the performance and complexity costs
+//  aren’t too high.
+describe.todo('future math errors', () => {
+  it('throws for forbidden <annotation-xml> tag', () => {
+    const callback = () => html`<math><annotation-xml></math>`;
+    const expectedMessage = 'The <annotation-xml> math element is forbidden.';
     assertThrows(callback, expectedMessage);
   });
 });
diff --git a/x-template.js b/x-template.js
index 2cf5677..467742a 100644
--- a/x-template.js
+++ b/x-template.js
@@ -188,14 +188,14 @@ class Forgiving {
         (localName === 'style' || localName === 'script') &&
         node.textContent.includes(Forgiving.#CONTENT_MARKER)
       ) {
-        throw new Error(`Interpolation of "${localName}" tags is not allowed.`);
+        throw new Error(`Interpolation of <${localName}> tags is not allowed.`);
       } else if (localName === 'textarea' || localName === 'title') {
         if (node.textContent.includes(Forgiving.#CONTENT_MARKER)) {
           if (node.textContent === `<!--${Forgiving.#CONTENT_MARKER}-->`) {
             node.textContent = '';
             onText(path);
           } else {
-            throw new Error(`Only basic interpolation of "${localName}" tags is allowed.`);
+            throw new Error(`Only basic interpolation of <${localName}> tags is allowed.`);
           }
         }
       }