SlotchangeExplosion #3

When we view this situation from HTML, it looks the same as in our previous example SlotchangeExplosion #1. The only difference is that two empty scripts will be processed along the way. But, in your console, you should now see 4 (or more) logs. Why is that?

The first script deliberately causes the browser to break its creation of the DOM. This means that the browser will make a "temporary" DOM branch that looks like this:

...
  < portrait-frame >
    #shadowRoot
      ..
      < green-frame >
        #shadowRoot
          < slot#inner >
            < slot#outer >
              < pre >¯\_(ツ)_/¯
              < pre >  |   |
              ---break 1---

This is the temporary state of the DOM in which the second slotchange event is dispatched. And you can see this state in the slot#outer.assignedElements({flatten: true}) which is: `[pre, pre, pre, script]`

The second script does the same with a "temporary" DOM branch that looks like this:

...
  < portrait-frame >
    #shadowRoot
      ..
      < green-frame >
        #shadowRoot
          < slot#inner >
            < slot#outer >
              < pre >¯\_(ツ)_/¯
              < pre >  |   |
              < pre >  | 6 |
              ---break 2---

This is the temporary state of the DOM in which the third slotchange event is dispatched. And you can see this state in the slot#outer.assignedElements({flatten: true}) which is: `[pre, pre, pre, script, pre, script]`

The last slotchange event occurs when the DOM branch is complete. :