¯\_(ツ)_/¯

self-portrait, by ivar

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 slot elements in the portrait-frame shadowDOM are chained to the respective slot elements in the green-frame elements' shadowDOMs.
  3. Then, h2 and span along with their 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 two slotchange events, that each trigger two event listeners, logging a total of four events.
But, in JS, six(?!) 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.