JSFiddle - React, Tailwind, and code Playground

by Joe Pea

HTML

<foo-bar>
    <bar-baz></bar-baz>
</foo-bar>

<script>

    class BarBaz extends HTMLElement {
        constructor() {
            super()
            console.log('bar-baz created')
        }
        connectedCallback() {
            console.log('bar-baz connected')
        }
    }

    class FooBar extends HTMLElement {
        constructor() {
            super()
            console.log('foo-bar created')
        }
        connectedCallback() {
            console.log('foo-bar connected')
            Promise.resolve().then(() => {
                console.log(this.children[0] instanceof BarBaz)
            })
        }
    }
    
    customElements.define('bar-baz', BarBaz)
    customElements.define('foo-bar', FooBar)

</script>