# @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
Le composant lit les attributs `dataProvider` et `testAttribute` exposés par son conteneur ancêtre.

<sonic-code language="typescript">
  <template>
//...
@customElement("demo-bind-reflect")
export class DemoBindReflect extends LitElement {
  static styles = [tailwind];
//
  @bind("bindReflectDemo.count", { reflect: true })
  @state()
  withReflect: number = 0;
//
  @bind("bindReflectDemo.count")
  @state()
  withoutReflect: number = 0;
  // initialize the publisher data
  connectedCallback() {
    super.connectedCallback();
    this.resetData();
  }
//
  resetData() {
    PublisherManager.get("bindReflectDemo").set({ count: 0 });
  }
  render() {
    return html`
      <div class="mb-3">
        from publisher : ${sub("bindReflectDemo.count")} <br />
        from component with reflect : ${this.withReflect} <br />
        from component without reflect : ${this.withoutReflect}
      </div>
      <sonic-button @click=${() => this.withReflect++}
        >Increment with reflect</sonic-button
      >
      <sonic-button @click=${() => this.withoutReflect++}
        >Increment without reflect</sonic-button
      >
      <sonic-button @click=${this.resetData}>Reset publisher data</sonic-button>
    `;
  }
}
  </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