feat(html): Add example of <template> (#2219)

* template

* lint & typo

* Add angle brackets

---------

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

live-examples/html-examples/interactive-elements/css/template.css

@@ -0,0 +1,10 @@
+.info-icon {
+    display: inline-block;
+    background-color: #2296f3;
+    border-radius: 50%;
+    height: 1.5em;
+    width: 1.5em;
+    margin-right: 0.5em;
+    text-align: center;
+    color: white;
+}

live-examples/html-examples/interactive-elements/js/template.js

@@ -0,0 +1,8 @@
+const insertBtn = document.getElementById('insert-btn');
+const container = document.getElementById('container');
+const template = document.getElementById('content-to-insert');
+
+insertBtn.addEventListener('click', () => {
+  const content = template.content.cloneNode(true);;
+  container.appendChild(content);
+});

live-examples/html-examples/interactive-elements/meta.json

@@ -23,6 +23,17 @@
             "title": "HTML Demo: <summary>",
             "type": "tabbed",
             "height": "tabbed-shorter"
+        },
+        "template": {
+            "exampleCode": "./live-examples/html-examples/interactive-elements/template.html",
+            "cssExampleSrc": "./live-examples/html-examples/interactive-elements/css/template.css",
+            "jsExampleSrc": "./live-examples/html-examples/interactive-elements/js/template.js",
+            "fileName": "template.html",
+            "title": "HTML Demo: <template>",
+            "type": "tabbed",
+            "defaultTab": "html",
+            "tabs": "html,css,js",
+            "height": "tabbed-shorter"
         }
     }
 }

live-examples/html-examples/interactive-elements/template.html

@@ -0,0 +1,9 @@
+<button id="insert-btn">Send Notification</button>
+
+<p id="container"></p>
+
+<template id="content-to-insert">
+    <p class="info-box">
+        <span class="info-icon">i</span><b>You have received a new friend invitation!</b>
+    </p>
+</template>