Source Code:
(back to article)
Submit
Result:
Report an issue
<body> <div id="open-shadow-host"></div> <button id="open-shadow-btn">Change Shadow Content</button> <script> const openShadowHost = document.getElementById('open-shadow-host'); const openShadowRoot = openShadowHost.attachShadow({ mode: 'open' }); openShadowRoot.innerHTML = ` <style> .shadow-content { color: blue; padding: 10px; border: 1px solid black; } </style> <div class="shadow-content">This is an open shadow root</div> `; document.getElementById('open-shadow-btn').addEventListener('click', () => { openShadowRoot.querySelector('.shadow-content').textContent = 'Open Shadow Root content updated!'; }); </script> </body>