Nested web components - web-component

Question

I am trying to build a little project using web components but I'm quite unexperienced with them and I'm kind of stuck.
I would like to write something like this in my HTML file
<my-sum>
<my-unit>
<my-unit>
<my-unit>
</my-sum>
and obtain something like
1 + 1 + 1
I don't have issues rendering my-unit as 1, but I don't know how to approach the fact that my-sum needs to access its children (which number could vary) and render them putting a + in between them.
Do you have any suggestion on how to approach this?

Answer 1

There are multiple things you need to consider. In your my-sum component, you might want to deal with reactivity i.e., when number of children elements change, here <my-unit>, you might want to recalculate your addition. If that is the case, you need to use mutation observer.
Otherwise, if you just want to calculate it once, you can use connectedCallback event lifecycle method with setTimeout to query your custom element like:
setTimeout(() => this.querySelectorAll('my-unit'), 100);
Next, you must also consider your use of shadow DOM. If you are using it, you need a different mechanism to query the children element. It would be something like:
setTimeout(() => this.shadowRoot.querySelectorAll('my-unit'), 100);
If you are using shadow DOM, it means you must also use slot element to accept the light DOM and render it within that slot. With slot, you can use slotchange event to detect node changes and re-calculate the sum of my-unit components.
In summary, you have multiple options to acheive your goal:
Without shadow DOM + No Reactivity: Use simple this.querySelectorAll('my-unit') preferably with connectedCallback lifecycle method
Without shadow DOM + Reactivity: Use querySelectorAll combined with mutation observer. observer event can be setup within the constructor or connnectedCallback.
With shadow DOM + No Reactivity: Acquire shadow DOM or slot element and query the children elements
With shadow DOM + Reactivity: Acquire shadow DOM and then slot element - use slotchange event to re-calculate the sum
With shadow DOM + Reactivity: Setup Mutation observer on light DOM and then query as mentioned above.