¯\_(ツ)_/¯
  ( . ) 
   === 
  |   | 
  | | | 
  | | | 
   ^ ^

SlotchangeNipSlip #3: CreateRedundantSlotchangeEvents

We start viewing the situation from HTML.
  1. A h2 and span element are declared in the top most lightDOM.
  2. The h2 and span elements are then transposed into their respective slot element in the portrait-frame shadowDOM.
  3. Then, the two slot elements in the portrait-frame shadowDOM are transposed into two different green-frame elements and their inner slots.
  4. From the perspective of HTML, this should trigger a total of four slotchange events.
But, in JS, four(?!) slotchange events are triggered.
  1. frameOne (2) [slot, document-fragment]
    This event is triggered as the first slot in portrait-frame is transposed to the inner slot in the first green-frame element.
  2. frameTwo (2) [slot, document-fragment]
    This event is triggered as the first slot in portrait-frame is transposed to the inner slot in the first green-frame element.
  3. frameOne (5) [slot, slot, document-fragment, green-frame#frameOne, document-fragment]
    portrait (5) [slot, slot, document-fragment, green-frame#frameOne, document-fragment]
    "¯\_(ツ)_/¯" is added to the portrait-frame element. This element is then transposed to the portrait-frame element and then the green-frame#one. The green-frame#one slotchange event listener is triggered first, then the portrait.
  4. frameTwo (5) [slot, slot, document-fragment, green-frame#frameTwo, document-fragment]
    portrait (5) [slot, slot, document-fragment, green-frame#frameTwo, document-fragment]
    "self-portrait, by ivar" is added to the portrait-frame element. This element is then transposed to the portrait-frame element and then the green-frame#two. The inner, green-frame#two slotchange event listener is triggered first, then the outer portrait-frame event listener.