This article talks about an advanced mechanism of achieving inter-component communication using events. I had earlier written about another simpler mechanism, using the writeback principle, on CCA communication with writeback.
However, the writeback principle works only when both the web components are located under the same root component. So it is not really a robust option. The current article deals with communicating using events, and this works across nested components, and does not depend on the hierarchy of the component in the DOM. My sample application contains 3 nested web components, in this order:
When the button in the innermost component is clicked, it raises multiple custom events, which bubble up the DOM. The First and the Second components have been set up to listen to these events and respond accordingly. As a good practice, I have set up helper functions to raise and subscribe to events in a separate function, and I have set the prototype of my custom components to my helper function. This helps to reduce repeated code and allows the web components to be driven by a consistent frame. Read the complete article here.
For regular information become a member in the Developer Partner Community please register here.