With more than 15 years working in IT, I have worked both with Backend and Frontend technologies. Currently, Front-end engineer, in love with Web development and specially Web Components.
Hi Westbrook, thanks for the article, it helped me to clarify a lot of things !
I have a case where I think I would not need composed:true, if I understood correctly.
Imagine I have a component (A), that in its shadow DOM, has 4 (1, 2. 3, 4) other components, each of them dispatching its own event. If for A to dispatch its event, it needs that the 4 children components to have fired their events (to compose a payload, for example).
So, in this case, can (should?) the click events of the children components have composed: false, as I don't care or want them outside main-component ?
Absolutely, this is a great case for not using composed: true as it appears that you are talking about the internal implementation of your element as opposed to its public API. Your child components will be able to limit possible side effects of the events they are dispatching while reducing the overall DOM those events traverse in anticipation for an escaping event being dispatched on the main component. Even at that point there could be room for containing that event to the scope of the tree in which the main component is present.
If you found this introduction to event theory useful, you might also check out open-wc.org/faq/events.html where the capabilities outlined here are converted to recommendations that should prove useful in organizing your components/applications.
With more than 15 years working in IT, I have worked both with Backend and Frontend technologies. Currently, Front-end engineer, in love with Web development and specially Web Components.
Hi Westbrook, thanks for the article, it helped me to clarify a lot of things !
I have a case where I think I would not need
composed:true, if I understood correctly.Imagine I have a component
(A), that in its shadow DOM, has 4(1, 2. 3, 4)other components, each of them dispatching its own event. If forAto dispatch its event, it needs that the 4 children components to have fired their events (to compose a payload, for example).So, in this case, can (should?) the click events of the children components have
composed: false, as I don't care or want them outsidemain-component?Absolutely, this is a great case for not using
composed: trueas it appears that you are talking about the internal implementation of your element as opposed to its public API. Your child components will be able to limit possible side effects of the events they are dispatching while reducing the overall DOM those events traverse in anticipation for an escaping event being dispatched on the main component. Even at that point there could be room for containing that event to the scope of the tree in which the main component is present.If you found this introduction to event theory useful, you might also check out open-wc.org/faq/events.html where the capabilities outlined here are converted to recommendations that should prove useful in organizing your components/applications.
Thanks ! Definitely will look at it !