Source Code:
(back to article)
Submit
Result:
Report an issue
<head> <style> .shadow-box { padding: 10px; border: 1px solid #000; background-color: lightcoral; color: white; } </style> </head> <body> <div class="shadow-box">This is styled by the main document</div> <div id="host"></div> <script> // Create a shadow root const hostElement = document.getElementById('host'); const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // Attach shadow DOM content shadowRoot.innerHTML = ` <style> .shadow-box { padding: 10px; border: 1px solid #000; background-color: lightblue; color: black; } </style> <div class="shadow-box">Hello, Shadow DOM!</div> `; </script> </body>