Source Code:
(back to article)
Submit
Result:
Report an issue
<div> <script> class InteractiveComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = ` <style> p { font-size: 20px; } </style> <p>This is interactive!</p> <button>Click me</button> `; this.shadowRoot.querySelector('button').addEventListener('click', () => { this.shadowRoot.querySelector('p').textContent = 'You clicked!'; }); } } customElements.define('interactive-component', InteractiveComponent); </script> <interactive-component></interactive-component> </div>