Updates demo styles and improves error messages.

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.
Netflix · Dec 16, 2024 · a2b4bc3 · a2b4bc3
1 parent d7b3a48
commit a2b4bc3
Show file tree

Hide file tree

Showing 6 changed files with 397 additions and 173 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>