Source Code:
(back to article)
Submit
Result:
Report an issue
<div id="my-element"> <!-- Shadow DOM content --> </div> <script> const shadowRoot = document.getElementById('my-element').attachShadow({ mode: 'open' }); shadowRoot.innerHTML = ` <style> /* Scoped styles */ :host { display: block; border: 2px solid #333; padding: 10px; } p { color: blue; } </style> <p>This paragraph is styled within the Shadow DOM.</p> `; </script>