Explanation:
The flattened DOM looks like this:
...
< grand-father >
#shadowRoot
< the-father >
#shadowRoot
< the-child >
#shadowRoot
< slot#child >
< slot#father >
< slot#grandFather >
matroska
Constructing this DOM produces six logs:
THE-CHILD SLOT#father
THE-FATHER SLOT#father
THE-CHILD SLOT#child
THE-CHILD SLOT#grandFather
THE-FATHER SLOT#grandFather
GRAND-FATHER SLOT#grandFather
-
Log 1 and 2 are the same slotchange event, ie. slot#grandFather being transposed to slot#father.
-
Log 3 is the innermost slotchange event, ie. slot#father being transposed to slot#child.
-
Log 4, 5, and 6 is the final slotchange event, ie. "matroska" being transposed to slot#grandFather.
-
The slotchange listener are triggered: 3 x the-child, 2 x the-father, 1 x grand-father.
the-child web component has principally no way of knowing how many times its slotchange listener
will be triggered during construction.
...
< grand-father > _
#shadowRoot *6
< the-father > _ |
#shadowRoot *2 *5
< the-child > | _ |
#shadowRoot *1 *3 *4
< slot#child > | ^ |
< slot#father > ^ |
< slot#grandFather > ^
matroska