Concorde decorator — @awaitConnectedAncestors. Delays a component's connectedCallback until its matching ancestors are defined and connected, so context they set up (a dataProvider, a publisher, a fetched payload) is ready when the child starts. P Doc ID: docs/decorators/wait-for-ancestors. Keywords: Concorde, supersoniks, docs/decorators/wait-for-ancestors, wait-for-ancestors, @awaitConnectedAncestors, decorator, awaitConnectedAncestors, connectedCallback, dataProvider, @dispatchConnectedEvent, element.matches(), @dispatchConnectedEvent(), sonic-connected, CONNECTED, ...selectors: string[]. URL: https://concorde.supersoniks.org/docs/decorators/wait-for-ancestors.

@awaitConnectedAncestors

Delays a component's connectedCallback until its matching ancestors are defined and connected, so context they set up (a dataProvider, a publisher, a fetched payload) is ready when the child starts. Pair it with @dispatchConnectedEvent on the ancestors, which signals readiness.

Import

import {
  awaitConnectedAncestors,
  dispatchConnectedEvent,
} from "@supersoniks/concorde/decorators";

@customElement("flight-scope")
@dispatchConnectedEvent()
export class FlightScope extends LitElement {}

@customElement("gate-panel")
@awaitConnectedAncestors("flight-scope")
export class GatePanel extends LitElement {}

Wait for an ancestor

Arguments are CSS selectors tested with element.matches() on each ancestor, across shadow roots. Here the parent element is not defined yet: the child stays uninitialized until you register it.

<docs-demo-sources for="demo-wait-ancestors-section"></docs-demo-sources>
    <demo-wait-ancestors-section></demo-wait-ancestors-section>

Several ancestors

With several selectors, the child waits for every matching ancestor. Register both to initialize it, in any order.

<docs-demo-sources for="demo-wait-ancestors-multi-section"></docs-demo-sources>
    <demo-wait-ancestors-multi-section></demo-wait-ancestors-multi-section>

Ancestor already connected

When the ancestor is already connected, or no ancestor matches, the child initializes immediately.

<docs-demo-sources for="demo-wait-ancestors-ready-section"></docs-demo-sources>
    <demo-wait-ancestors-ready-section></demo-wait-ancestors-ready-section>

Signal readiness

@dispatchConnectedEvent() dispatches a bubbling sonic-connected event (exported as CONNECTED) at the end of the ancestor's connectedCallback. You can listen to it anywhere:

import { CONNECTED } from "@supersoniks/concorde/decorators";

document.addEventListener(CONNECTED, (e) => console.log("ready:", e.target));

Elements without a hyphen in their tag name count as connected. A custom element ancestor that never dispatches the event releases the child after a 5 second timeout, so decorate the ancestors you wait for.

API reference