TAG
CSS
JavaScript
Result
Run
License
<simple-custom text="Custom element example text"></simple-custom> <p>Standard paragraph example text</p>
p { background-color: #FFFF00; } simple-custom { background-color: pink; } :defined { font-style: italic; } simple-custom:defined { display: block; font-weight: bold; }
window.addEventListener("load", () => { globalThis.customElements.define( "simple-custom", class extends HTMLElement { constructor() { super(); const elDiv = document.createElement("div"); elDiv.textContent = this.getAttribute("text"); this.attachShadow({ mode: "open" }).appendChild(elDiv); } } ); });
Console
expand_less
License
License
by DevDic
Close