TAG
JavaScript
Result
Run
License
<button type="button" id="btn-demo">Demo</button>
class MyContent 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 and try click me"; ElAddH1.addEventListener("click", e => { e.currentTarget.requestFullscreen(); }); sr.append(ElAddH1); } } document.addEventListener("DOMContentLoaded", () => { const ElBtnDemo = document.getElementById("btn-demo"); let elMyContent; ElBtnDemo.addEventListener("click", e => { customElements.define("my-content", MyContent); elMyContent = document.createElement("my-content"); document.body.append(elMyContent); }); document.addEventListener("fullscreenchange", () => { if(elMyContent.shadowRoot.fullscreenElement) { console.log(`Fullscreen Element: ${elMyContent.shadowRoot.fullscreenElement.tagName}`); } }); });
Console
expand_less
License
License
by DevDic
Close