TAG
JavaScript
Result
Run
License
<h1>Proverbs</h1> <dl class="proverbs"> <template id="my-template"> <style> dt { color: blue; } </style> <dt><slot name="proverb"></slot></dt> </template> </dl> <my-content> <p slot="proverb">Don’t cross the bridge until you come to it.</p> </my-content> <my-content> <p slot="proverb">Honesty is the best policy.</p> </my-content>
window.addEventListener("load", function() { window.customElements.define("my-content", class extends HTMLElement { constructor() { super(); const elTemplate = document.getElementById("my-template").content; const shadowRoot = this.attachShadow({ mode: "open" }); shadowRoot.append(elTemplate.cloneNode(true)); } } ); const elMyContent = document.querySelector("my-content > p"); console.log(elMyContent.assignedSlot.name); });
Console
expand_less
License
License
by DevDic
Close