JSFiddle - React, Tailwind, and code Playground

HTML

<el-one>
  <el-two>
  </el-two>
</el-one>

JavaScript

class ElementOne extends HTMLElement {
    attachedCallback() {
        console.log('Expected to be true:', this.children[0] instanceof ElementTwo)
    }
}

class ElementTwo extends HTMLElement { }

// TEST CASE 1: Register elements AFTER instances are already in DOM but not upgraded:
document.registerElement('el-one', ElementOne)
document.registerElement('el-two', ElementTwo)
// END TEST CASE 1



class ElementThree extends HTMLElement {
    attachedCallback() {
        console.log('Expected to be true:', this.children[0] instanceof ElementFour)
    }
}

class ElementFour extends HTMLElement { }

// TEST CASE 2: register elements THEN add new insances to DOM:
document.registerElement('el-three', ElementThree)
document.registerElement('el-four', ElementFour)
setTimeout(function() {
    const four = document.createElement('el-four')
    const three = document.createElement('el-three')
    three.appendChild(four)
    document.body.appendChild(three)
}, 1000)
// END TEST CASE 2: