JSFiddle - React, Tailwind, and code Playground

by Joe Pea

HTML

<div id="test">
</div>

JavaScript

var d1 = document.querySelector('#test')
var r1 = d1.attachShadow({mode: 'open'})
r1.innerHTML = '<div><slot name="one" slot="two"></slot></div>'
var s1 = r1.querySelector('slot')
s1.addEventListener('slotchange', event => {
    console.log('')
    console.log('slot change on s1:', s1.assignedNodes({flatten:true}))
})

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')
s2.addEventListener('slotchange', event => {
    console.log('slot change on s2:', s2.assignedNodes({flatten:true}))
})

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')
s3.addEventListener('slotchange', event => {
    console.log('slot change on s3:', s3.assignedNodes({flatten:true}))
})

var d4 = r3.querySelector('div')
var r4 = d4.attachShadow({mode: 'open'})
r4.innerHTML = '<div><slot name="four"></slot></div>'
var s4 = r4.querySelector('slot')
s4.addEventListener('slotchange', event => {
    console.log('slot change on s4:', s4.assignedNodes({flatten:true}))
})

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