Concorde decorator — @ancestorAttribute. Copies the value of an attribute from the nearest element that carries it (the host itself, then its ancestors, across shadow roots) into a class property. Use it to pick up a scope such as dataProvid Doc ID: docs/decorators/ancestor-attribute. Keywords: Concorde, supersoniks, docs/decorators/ancestor-attribute, ancestor-attribute, @ancestorAttribute, decorator, ancestorAttribute, dataProvider, connectedCallback, , "", dataprovider, { dynamic: true }, null, @state(), "${dataProvider}". URL: https://concorde.supersoniks.org/docs/decorators/ancestor-attribute.

@ancestorAttribute

Copies the value of an attribute from the nearest element that carries it (the host itself, then its ancestors, across shadow roots) into a class property. Use it to pick up a scope such as dataProvider without passing it down by hand, typically to feed a dynamic key of @subscribe.

Import

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

@ancestorAttribute("dataProvider")
dataProvider: string | null = null;

Read once at connect

By default the value is read once, just before the component's connectedCallback, and never updated. The closest element with the attribute wins. If no ancestor has it, the property keeps its initial value.

<div dataProvider="flights.CN001" gate="B12">
  <docs-demo-sources for="demo-ancestor-attribute"></docs-demo-sources>
  <demo-ancestor-attribute></demo-ancestor-attribute>
</div>

An attribute present without a value (<div gate>) resolves to "". A camelCase name also matches its lowercase form (dataProvider and dataprovider).

Follow DOM changes

With { dynamic: true }, the property stays in sync while the component is connected: when an ancestor changes the attribute, when a closer ancestor gains or loses it, and when the component is moved. When no ancestor has the attribute, the property becomes null. Add @state() so Lit re-renders on each assignment.

@ancestorAttribute("dataProvider", { dynamic: true })
@state()
dataProvider: string | null = null;

Change the parent or outer value, insert a closer wrapper, or remove an attribute: the child always shows the nearest one.

<docs-demo-sources for="demo-ancestor-attribute-dynamic-section"></docs-demo-sources>
    <demo-ancestor-attribute-dynamic-section></demo-ancestor-attribute-dynamic-section>

Keys of @subscribe and @bind that use the property as a placeholder ("${dataProvider}") are re-resolved on each change.

API reference