Imagine a scenario where I have the following DOM tree
<body>
<parent-component>
<div>
<child-component></child-component>
</div>
</parent-component>
</body>
The child component has a seekParent
function that fires off a CustomEvent
that should be caught by the <parent-component>
, which then uses a callback to tell the child this is the parent component node.
Consider when the child component is is defined via customElements.define()
first. The child’s constructor fires off the CustomEvent
as soon as <child-component>
is defined, since parent nodes do not need to be valid and at this stage be HTMLUnknownElement
.
The event bubbles through the <parent-component>
without being caught because that component has not yet called its constructor, to attach an event listener.
Is it at all possible to not parse child nodes within a DOM tree until a parent becomes defined / valid Element? Otherwise, is there any way around this issue besides using a setTimeout()
?
Thanks