JSFiddle - React, Tailwind, and code Playground

by Joe Pea

HTML

<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')
            console.log(this.children[0] instanceof BarBaz)
        }
    }
    
    customElements.define('foo-bar', FooBar)
    customElements.define('bar-baz', BarBaz)

</script>

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