TAG
CSS
JavaScript
Result
Run
License
<parent-element></parent-element> <template id="templ-outer-list"> <child-element part="parent" exportparts="list-item-a, list-item-b"></child-element> </template> <template id="teml-inner-list"> <span part="list-item-a"> List item A </span> <span part="list-item-b"> List item B </span> </template>
parent-element::part(parent) { border: 1px solid red; } parent-element::part(list-item-a) { color: red; }
window.addEventListener("load", () => { class ParentElement extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); const elTemplate = document.getElementById("templ-outer-list"); this.shadowRoot.append(document.importNode(elTemplate.content, true)); } } customElements.define("parent-element", ParentElement); class childElement extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); const elTemplate = document.getElementById("teml-inner-list"); this.shadowRoot.append(document.importNode(elTemplate.content, true)); } } customElements.define("child-element", childElement); });
Console
expand_less
License
License
by DevDic
Close