fix: Better element ID naming for disambiguation (fixes #74) (#77)

ngdangtu-vn · bsmth · web-flow · commit d8f4090b1300 · 2024-06-24T11:42:03.000+02:00
* disambiguate a name in simple-template example

* Apply suggestions from code review

Co-authored-by: Brian Thomas Smith &lt;brian@smith.berlin&gt;

---------

Co-authored-by: Brian Thomas Smith &lt;brian@smith.berlin&gt;
diff --git a/simple-template/index.html b/simple-template/index.html
@@ -8,15 +8,17 @@
 <body>
   <h1>Simple template</h1>
 
-  <template id="my-paragraph">
+  <template id="custom-paragraph">
     <style>
       p {
         color: white;
         background-color: #666;
         padding: 5px;
       }
     </style>
-    <p><slot name="my-text">My default text</slot></p>
+    <p>
+      <slot name="my-text">My default text</slot>
+    </p>
   </template>
 
   <my-paragraph>
diff --git a/simple-template/main.js b/simple-template/main.js
@@ -3,10 +3,10 @@ customElements.define('my-paragraph',
     constructor() {
       super();
 
-      const template = document.getElementById('my-paragraph');
+      const template = document.getElementById('custom-paragraph');
       const templateContent = template.content;
 
-      this.attachShadow({mode: 'open'}).appendChild(
+      this.attachShadow({ mode: 'open' }).appendChild(
         templateContent.cloneNode(true)
       );
     }
