Source Code:
(back to article)
Submit
Result:
Report an issue
<head> <style> .styled-box { color: red; background-color: yellow; padding: 10px; border: 1px solid green; } </style> </head> <body> <div class="styled-box">This is styled by the main document</div> <div id="styled-host"></div> <script> const styledHost = document.getElementById('styled-host'); const shadowRoot = styledHost.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = ` <style> .styled-box { color: white; background-color: black; padding: 10px; border-radius: 5px; } </style> <div class="styled-box">Styled by Shadow DOM</div> `; </script> </body>