Source Code:
(back to article)
Submit
Result:
Report an issue
<div id="slot-host"> <span slot="title">Shadow DOM Slot Example</span> </div> <script> const slotHost = document.getElementById('slot-host'); const shadowRoot = slotHost.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = ` <style> .container { border: 1px solid #ccc; padding: 10px; } </style> <div class="container"> <h1><slot name="title"></slot></h1> <p>This is a Shadow DOM component with a slot for the title.</p> </div> `; </script>