TAG
JavaScript
Result
Run
License
<button type="button" class="btn-demo" value="open">Show Demo(open)</button> <button type="button" class="btn-demo" value="closed">Show Demo(closed)</button>
class MyContentOpen extends HTMLElement { constructor() { super(); const sr = this.attachShadow({ mode: "open" }); const stylesheet = new CSSStyleSheet(); stylesheet.replaceSync("h1 { background: yellow; }"); sr.adoptedStyleSheets.push(stylesheet); const ElAddH1 = document.createElement("h1"); ElAddH1.textContent = "I am shadow root's element in open mode."; sr.append(ElAddH1); } } class MyContentClosed extends HTMLElement { constructor() { super(); const sr = this.attachShadow({ mode: "closed" }); const stylesheet = new CSSStyleSheet(); stylesheet.replaceSync("h1 { background: pink; }"); sr.adoptedStyleSheets.push(stylesheet); const ElAddH1 = document.createElement("h1"); ElAddH1.textContent = "I am shadow root's element in closed mode."; sr.append(ElAddH1); } } document.addEventListener("DOMContentLoaded", () => { const Iter_elButtons = document.querySelectorAll(".btn-demo")[Symbol.iterator](); for(let button of Iter_elButtons) { button.addEventListener("click", makeShadowRoot, { once : true }); } let elMyContentOpen, elMyContentClosed; function makeShadowRoot(e) { const El_currTarget = e.currentTarget; let mode = El_currTarget.value; if(mode == "open") { customElements.define("my-content-open", MyContentOpen); elMyContentOpen = document.createElement("my-content-open"); document.body.append(elMyContentOpen); El_currTarget.textContent = "Delete to node in shadow root from open mode"; El_currTarget.addEventListener("click", deleteShadowRootNode, { once : true } ); } else { customElements.define("my-content-closed", MyContentClosed); elMyContentClosed = document.createElement("my-content-closed"); document.body.append(elMyContentClosed); El_currTarget.textContent = "Delete to node in shadow root from closed mode"; El_currTarget.addEventListener("click", deleteShadowRootNode, { once : true } ); } } function deleteShadowRootNode(e) { const El_currTarget = e.currentTarget; let mode = El_currTarget.value; let elDelTarget; if(mode == "open") elDelTarget = elMyContentOpen.shadowRoot.querySelector("h1"); else elDelTarget = elMyContentClosed.shadowRoot.querySelector("h1"); try { elDelTarget.remove(); } catch(e) { console.log(e.message); } } });
Console
expand_less
License
License
by DevDic
Close