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
Perhaps you could make a component that delays the rendering until it's mounted:
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
mounted: false,
}
}
componentDidMount() {
this.setState({mounted: true});
}
render() {
if (!this.state.mounted) return null;
return this.props.children;
}
}