# @ancestorAttribute

The `@ancestorAttribute` decorator automatically injects the value of an ancestor's attribute into a class property at the time of `connectedCallback`.

## Principle

This decorator uses `HTML.getAncestorAttributeValue` to traverse up the DOM tree from the current element and find the first ancestor that has the specified attribute. The value of this attribute is then assigned to the decorated property.

## Usage

### Import

<sonic-code language="typescript">
  <template>
import { ancestorAttribute } from "@supersoniks/concorde/decorators";
  </template>
</sonic-code>

### Basic example

The component reads `dataProvider` and `testAttribute` from its ancestor wrapper.

<sonic-code language="typescript">
  <template>
import { html, LitElement } from "lit";
import { customElement } from "lit/decorators.js";
import { ancestorAttribute } from "@supersoniks/concorde/decorators";
//
@customElement("demo-ancestor-attribute")
export class DemoAncestorAttribute extends LitElement {
  @ancestorAttribute("dataProvider")
  dataProvider: string | null = null;
//
  @ancestorAttribute("testAttribute")
  testAttribute: string | null = null;
//
  render() {
    return html`
      <section>
        <p>dataProvider: <strong>${this.dataProvider || "null"}</strong></p>
        <p>testAttribute: <strong>${this.testAttribute || "null"}</strong></p>
      </section>
    `;
  }
}
  </template>
</sonic-code>

<sonic-code>
  <template>
<div dataProvider="demoDataProvider" testAttribute="test-value-123">
  <demo-ancestor-attribute></demo-ancestor-attribute>
</div>
  </template>
</sonic-code>


## Use cases

This decorator is particularly useful for:

- **Retrieving the `dataProvider`** from an ancestor without having to pass it explicitly
- **Retrieving the `formDataProvider`** in form components
- **Retrieving the `wordingProvider`** for translation
- **Retrieving any other attribute** defined on an ancestor

## Behavior

- The search starts from the current element and traverses up the DOM tree
- If the attribute is not found, the property will be assigned `null`
- The injection happens automatically at the time of `connectedCallback`
- The value is not reactive: it is only updated once when the element is connected to the DOM

## Notes

- This decorator works with any component that has a `connectedCallback` method (such as `LitElement` or components extending `Subscriber`)
- The search also traverses Shadow DOM if necessary
- If multiple ancestors have the attribute, the closest one will be used