JSFiddle - React, Tailwind, and code Playground

by Jan Marthedal Rasmussen

HTML

<tag-a>
    <tag-b>
        <tag-c></tag-c>
    </tag-b>
    <tag-b>
    </tag-b>
</tag-a>

<p id="lifecycle"></p>

JavaScript

var lifecycle = [], proto;

proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function () { lifecycle.push('create A'); };
proto.attachedCallback = function () { lifecycle.push('attach A'); };
document.registerElement('tag-a', {prototype: proto});

proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function () { lifecycle.push('create B'); };
proto.attachedCallback = function () { lifecycle.push('attach B'); };
document.registerElement('tag-b', {prototype: proto});

proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function () { lifecycle.push('create C'); };
proto.attachedCallback = function () { lifecycle.push('attach C'); };
document.registerElement('tag-c', {prototype: proto});

window.onload = function () {
    document.querySelector('#lifecycle').innerHTML = lifecycle.join('<br>');
};