# lightweight-sdk-web-component

A lightweight library to build web components easily.

## Installation

```bash
pnpm add @lightweight-sdk/web-component
```

## Prérequis côté consommateur

`@LinkToDom` et `@CustomComponent` sont des décorateurs TypeScript "legacy" (signature `(target, key)` / `(constructor)`). Pour les utiliser, ton propre `tsconfig.json` doit activer :

```jsonc
{
	"compilerOptions": {
		"experimentalDecorators": true
	}
}
```

## Usage

```ts
import { AbstractComponent, CustomComponent, LinkToDom } from "@lightweight-sdk/web-component";

@CustomComponent({
	tagName: "my-widget",
	template: "<span ref=\"label\"></span>",
})
class MyWidget extends AbstractComponent {
	@LinkToDom("label")
	private label!: HTMLElement;

	public override init(): void {
		this.label.textContent = "Hello";
	}
}
```

## API

- `AbstractComponent` — classe de base à étendre pour déclarer un web component (cycle de vie `init`/`refresh`).
- `CustomComponent(params)` — décorateur de classe qui enregistre le custom element et branche le template/Shadow DOM.
- `LinkToDom(ref)` — décorateur de propriété qui lie un membre de la classe à l'élément DOM portant l'attribut `ref="..."` correspondant.
- `findRefElement(ref, parent?)` — retrouve un élément par son attribut `ref` dans un conteneur donné (`document.body` par défaut).
- `ComponentParams`, `LinkedProperty`, `AcceptedHTMLContent` — types associés.