custom-elements/examples/shadowdom/shadow3.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
27
28
29
30
31
32
33
34
35
36
37
38
39
<!doctype html>
<title>Shadow DOM Example 3</title>
<style>
  section   { padding: 0.25rem 1rem; background: #AACCFF; }
  section p { padding: 0.25rem 1rem; background: #FFDDBB; }
</style>

<h1>Shadow DOM Example 3</h1>
<button id="b1">GO!</button>
<main>

  <section id="example">
    <p>This text will be replaced.</p>
    <p>This will also change.</p>
  </section>

  <section>
    <p>This text will remain.</p>
    <p>No change here.</p>
  </section>

</main>

<template id="t1">
    <p>I am part of a template.</p>
    <p>When I am visible in the page I am also part of a shadow DOM.</p>
</template>

<script>
  function attachShadowAndUseTemplate() {
    const ex = document.querySelector("#example");
    const shadow = ex.attachShadow({ mode: "closed" });
    const cloned = t1.content.cloneNode(true);
    shadow.append(cloned);
  }

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