slotchange event order

Shows that `slotchange` events happen from shallowest slot to deepest slot across shadow root trees.

HTML

<div></div>

JavaScript

var d1 = document.querySelector('div')
var r1 = d1.attachShadow({mode: 'open'})
r1.innerHTML = '<div><slot name="one" slot="two"></slot></div>'
var s1 = r1.querySelector('slot')

var d2 = r1.querySelector('div')
var r2 = d2.attachShadow({mode: 'open'})
r2.innerHTML = '<div><slot name="two" slot="three"></slot></div>'
var s2 = r2.querySelector('slot')

var d3 = r2.querySelector('div')
var r3 = d3.attachShadow({mode: 'open'})
r3.innerHTML = '<div><slot name="three" slot="four"></slot></div>'
var s3 = r3.querySelector('slot')

var d4 = r3.querySelector('div')
var r4 = d4.attachShadow({mode: 'open'})
r4.innerHTML = '<div><slot name="four"></slot></div>'
var s4 = r4.querySelector('slot')

s2.addEventListener('slotchange', event => {
    console.log('slot change on s2:', s2.assignedNodes(), s2.assignedNodes({flatten:true}))
})
s1.addEventListener('slotchange', event => {
    console.log('slot change on s1:', s1.assignedNodes(), s1.assignedNodes({flatten:true}))
})
s4.addEventListener('slotchange', event => {
    console.log('slot change on s4:', s4.assignedNodes(), s4.assignedNodes({flatten:true}))
})
s3.addEventListener('slotchange', event => {
    console.log('slot change on s3:', s3.assignedNodes(), s3.assignedNodes({flatten:true}))
})

setTimeout(() => d1.innerHTML = '<p slot="one"></p>', 1000)
setTimeout(() => d1.removeChild(d1.querySelector('p')), 2000)