Ask HN: What are some recommended patterns when using Web Components?

The MDN Web docs [0] are useful to understand what are custom elements, the shadow DOM, or templates and slots. But as someone starting with web components and front-end stuff in general, I was wondering about the recommended approaches/design patterns when building more complex apps ?

For instance, how should components communicate with each other? By using a parent element systematically, firing up events from child nodes, then calling children methods from the parent node? Is this the equivalent of the "props down, events up" pattern in React for instance [1]?

Regarding the life-cycle, is there any reason to use the `constructor()` instead of the `connectedCallback()` for init code?

Another one that seems to have sparked some debate [2]: how to work with custom elements that need to interact with their children? Should I use `setTimeout()` to wait for the DOM to be parsed [3], should I use mutation observers, or should I fire up an event from the children to notify its parent when it is ready to be used?

These are just a couple questions that came up when reading about this, but I am curious about general best practices when building front-end apps using web components.

[0] https://developer.mozilla.org/en-US/docs/Web/Web_Components

[1] https://jasonformat.com/props-down-events-up/

[2] https://github.com/WICG/webcomponents/issues/809

[3] https://stackoverflow.com/questions/58354531/custom-elements-connectedcallback-wait-for-parent-node-to-be-available-bef