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 elStyle = document.createElement("style"); const ElAddInput = document.createElement("input"); ElAddInput.value = "OK..."; sr.append(elStyle, ElAddInput); sr.querySelector('style').textContent = `input { background: yellow; }`; } } 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("click", () => { const Sr = elMyContent.shadowRoot; Sr.querySelector("input").focus(); console.log(Sr.activeElement.value); }); });
Console
expand_less
License
License
by DevDic
Close