2024-02-16 08:14:17 +00:00
|
|
|
<!DOCTYPE html>
|
2023-03-23 14:46:33 +00:00
|
|
|
<div id="a">hello <button id="b">world</button>
|
|
|
|
|
<span id="f"></span>
|
2023-06-06 12:39:54 +00:00
|
|
|
<div id="c"></div>
|
|
|
|
|
</div>
|
2023-06-29 11:00:57 +00:00
|
|
|
<a>My name is Jun (pronounced like "June")</a>
|
2023-06-06 12:39:54 +00:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const topShadow = document.querySelector('#c');
|
|
|
|
|
topShadow.attachShadow({ mode: "open" });
|
|
|
|
|
topShadow.shadowRoot.innerHTML = `shadow dom<div id="d"></div>`;
|
|
|
|
|
|
|
|
|
|
const innerShadow = topShadow.shadowRoot.querySelector('#d');
|
|
|
|
|
innerShadow.attachShadow({ mode: "open" });
|
|
|
|
|
innerShadow.shadowRoot.innerHTML = `<a id="e">deep text</a>`;
|
|
|
|
|
</script>
|
