Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Shadow DOM Example</title> <style> .card { padding: 20px; margin: 10px; border: 1px solid #ccc; } </style> </head> <body> <div id="shadow-host" class="card"> <span>This is the light DOM content</span> </div> <script> const host = document.getElementById('shadow-host'); const shadowRoot = host.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = ` <style> .shadow-card { padding: 20px; margin: 10px; border: 1px solid blue; color: blue; } </style> <div class="shadow-card">This is inside the Shadow DOM</div> `; </script> </body> </html>