TAG
CSS
JavaScript
Result
Run
License
<button type="button" id="btn-demo">Demo</button> <div>div outside of ShadowRoot </div>
.container { width: 300px; height: 200px; margin: auto; border: 1px solid #FF0000; overflow: auto; } .container> p { width: 600px; }
class MyContent extends HTMLElement { constructor() { super(); const sr = this.attachShadow({ mode: "open" }); const elStyle = document.createElement("style"); const ElAddDiv = document.createElement("div"); ElAddDiv.textContent = "div inside of ShadowRoot"; sr.append(elStyle, ElAddDiv); sr.querySelector('style').textContent = `div { background: yellow; }`; } } document.addEventListener("DOMContentLoaded", () => { const ElBtnDemo = document.getElementById("btn-demo"); ElBtnDemo.addEventListener("click", e => { customElements.define("my-content", MyContent); const elMyContent = document.createElement("my-content"); document.body.append(elMyContent); }); });
Console
expand_less
License
License
by DevDic
Close