How to communicate between Web Components (native UI)?

by

If you look at Web Components as being like built in components like <div> and <audio> then you can answer your own question. The components do not talk to each other.

Once you start allowing components to talk directly to each other then you don’t really have components you have a system that is tied together and you can not use Component A without Component B. This is tied too tightly together.

Instead, inside the parent code that owns the two components, you add code that allows you to receive events from component A and call functions or set parameters in Component B, and the other way around.

Having said that there are two exceptions to this rule with built in components:

  1. The <label> tag: It uses the for attribute to take in an ID of another component and, if set and valid, then it passes focus on to the other component when you click on the <label>

  2. The <form> tag: This looks for form elements that are children to gather the data needed to post the form.

But both of these are still not TIED to anything. The <label> is told the recipient of the focus event and only passes it along if the ID is set and valid or to the first form element as a child. And the <form> element does not care what child elements exist or how many it just goes through all of its descendants finding elements that are form elements and grabs their value property.

But as a general rule you should avoid having one sibling component talk directly to another sibling. The methods of cross communications in the two examples above are probably the only exceptions.

Instead your parent code should listen for events and call functions or set properties.

Yes, you can wrap that functionality in an new, parent, component, but please save yourself a ton of grief and avoid spaghetti code.

As a general rule I never allow siblings elements to talk to each other and the only way they can talk to their parents is through events. Parents can talk directly to their children through attributes, properties and functions. But it should be avoided in all other conditions.

More Related Contents:

  1. How to create new instance of an extended class of custom elements
  2. Use of Template with HTML Custom Elements
  3. How to get element in user-agent shadow root with JavaScript?
  4. Is it possible to access Shadow DOM elements through the parent document?
  5. How to let imported css font / icons have effects on elements in the shadow dom?
  6. How to separate web components to individual files and load them?
  7. Custom Element getRootNode.closest() function crossing multiple (parent) shadowDOM boundaries
  8. html form that passes information to a variable in javascript [closed]
  9. How do I load an HTML page in a div using JavaScript?
  10. How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?
  11. How does Content Security Policy (CSP) work?
  12. Zoom in on a point (using scale and translate)
  13. How to submit an HTML form without redirection
  14. Is there a DOM event that fires when an HTML select element is closed?
  15. How do I remove tinyMCE and then re-add it?
  16. play .wav sound file encoded in base64 with javascript
  17. Why is the variable holding the input value always logged as empty?
  18. How to ONLY trigger parent click event when a child is clicked
  19. append option to select menu?
  20. How can I detect when a new element has been added to the document in jquery?
  21. How do I disable a href link in JavaScript?
  22. Combine two selectors with one jQuery object
  23. Pausing CSS animation with javascript and also jumping to a specific place in the animation
  24. How do I export multiple html tables to excel?
  25. querySelectorAll.style does not work
  26. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  27. Rotate div text after clicking on button using jquery and css
  28. How much data / information can we save / store in a QR code?
  29. Hot to get incomplete datetime-local input values
  30. Do duplicate ID values screw up jQuery selectors?

Leave a Comment