custom-elements/examples/templates/template2.html at main · portsoc/custom-elements · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<title>Template Example 2</title>
<h1>Template Example 2</h1>

<p>In this example, part of the content is modified programmatically in order to display the correct time at the moment the button was pressed.</p>
<p>To achieve this a <code>querySelector</code> is used on the <code>cloned</code> document fragment (not on <code>document</code> as is more typically seen.)</p>

<button id=b1>GO!</button>

<template id=t1>
  <p>The button was pressed at approximately <em>unknown</em>.</p>
</template>

<script>

  function exampleDynamicTemplateUse() {
    const t1 = document.querySelector("#t1");
    const cloned = t1.content.cloneNode(true);
    const updateThis = cloned.querySelector("em");
    updateThis.textContent = new Date().toLocaleTimeString();
    document.body.append(cloned);
  }

  const b1 = document.querySelector("#b1");
  b1.addEventListener("click", exampleDynamicTemplateUse);
</script>