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

* disambiguate a name in simple-template example * Apply suggestions from code review Co-authored-by: Brian Thomas Smith <[email protected]> --------- Co-authored-by: Brian Thomas Smith <[email protected]>
mdn · Jun 24, 2024 · d8f4090 · d8f4090
1 parent 712ce27
commit d8f4090
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
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)
       );
     }