DEV Community

Discussion on: Missing the Message Bus in HTML Custom Elements (and Micro-Frontends in General)

Collapse
 
dannyengelman profile image
Danny Engelman • Edited

I don't get it why you want to 'drilldown' and not make every 'drilldown' element listen at a parent/document element.
Yes, you will have hardcoded Custom Event names (or just one); but you have the same hardcoding now with your 'drilldown' attribute
Plus, querySelectorAll can NEVER reach elements inside shadowDOM

An Event bus via (grand)parentNode/document is the way to go.
Also note the Event payload isn't restricted to data. You CAN send Function references.

 detail:{
  message: "Hello World! If you understand this Event, please call my detail.confirm function",
  confirm: (evt,reveiver) => console.log( receiver , " heard me! Yeah, there is intelligence out there!" );
 }

See: jsfiddle.net/CustomElementsExample...

Collapse
 
ronnewcomb profile image
Ron Newcomb

Um, how to explain this? The event attributes like onClick or onMyCustomEvent don't "belong" to the components on which they appear.

doesn't "own" or "implement" an onClick attribute; likewise doesn't hardcode anything about onDrilldown or any other event. Don't confuse the component's invocation with its definition.

I don't understand your comment about queryselectorall. Custom Events work like built-in event regarding it. What of it?