Source Code:
(back to article)
Submit
Result:
Report an issue
<body> <div id="closed-shadow-host"></div> <button id="closed-shadow-btn">Try to Change Shadow Content</button> <script> const closedShadowHost = document.getElementById('closed-shadow-host'); const closedShadowRoot = closedShadowHost.attachShadow({ mode: 'closed' }); closedShadowRoot.innerHTML = ` <style> .shadow-content { color: red; padding: 10px; border: 1px solid black; } </style> <div class="shadow-content">This is a closed shadow root</div> `; // This will not work as intended because the shadow root is closed document.getElementById('closed-shadow-btn').addEventListener('click', () => { try { closedShadowHost.shadowRoot.querySelector('.shadow-content').textContent = 'Attempted to update closed shadow root!'; } catch (e) { alert('Cannot access shadow root content from outside!'); } }); </script> </body>