How To Create Reusable HTML Components Using Only JavaScript
With the advent of a plethora of frontend frameworks and libraries, many developers are gradually losing touch with a lot of the amazing features that are baked into JavaScript. While these frameworks and libraries simplify a lot of the development p...
saje.hashnode.dev12 min read
William Owen
You mentioned a way to assign an event to a button within a slot, and mentioned how the event doesn't get added to slot content that is injected... Using delegated event handling, you can get around that. The basic idea is that the click event is on the shadow dom, and in the event handler we check if the button was clicked.
connectedCallback() { this.shadowRoot.addEventListener('click', (e) => { if(e.target.closest('.primary-btn')){ console.log('shadow event triggered!') } }) }