Imagina un escenario donde tengo el siguiente árbol DOM
<body> <parent-component> <div> <child-component></child-component> </div> </parent-component> </body> El componente secundario tiene una función seekParent que activa un CustomEvent que debe ser capturado por <parent-component> , que luego usa una devolución de llamada para decirle al elemento secundario que este es el nodo del componente principal.
Considere cuándo el componente secundario se define a través customElements.define() primero. El constructor del hijo CustomEvent tan pronto como se define <child-component> , ya que no es necesario que los nodos principales sean válidos y en esta etapa sean HTMLUnknownElement .
El evento burbujea a través del <parent-component> sin ser capturado porque ese componente aún no ha llamado a su constructor, para adjuntar un detector de eventos.
¿Es posible no analizar los nodos secundarios dentro de un árbol DOM hasta que un padre se convierta en un Elemento definido/válido? De lo contrario, ¿hay alguna forma de evitar este problema además de usar setTimeout() ?
Gracias
Tal vez podría crear un componente que retrase la representación hasta que se monte:
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; } }