# dom-controller
**Attach behavior to any HTML element using just an attribute.**
`dom-controller` connects JavaScript logic to DOM elements declaratively — no inline scripts, no global code, just clean HTML and modular controllers.
**📦 Less than 2KB minified + gzipped**
> Used in production across multiple projects. Battle-tested and ready to ship.
---
## 🚀 Quick Start
### 1. Load the library
```html
```
### 2. Link your controller
```html
```
### 3. Use it in HTML
```html
```
### 4. Write the controller
```js
// /controllers/click-counter.mjs
export default class ClickCounterController {
count = 0;
async attach(element) {
this.element = element;
element.addEventListener('click', this.onClick.bind(this));
}
async detach(element) {
element.removeEventListener('click', this.onClick.bind(this));
}
onClick() {
this.count++;
this.element.textContent = `Clicked ${this.count} times`;
}
}
```
---
## ✍️ TypeScript Example
```ts
// /controllers/click-counter.ts
import { IController } from 'dom-controller/IController';
export default class ClickCounterController implements IController {
count = 0;
async attach(element: HTMLElement): Promise {
element.addEventListener('click', this.onClick.bind(this));
}
async detach(element: HTMLElement): Promise {
element.removeEventListener('click', this.onClick.bind(this));
}
onClick() {
this.count++;
this.element.textContent = `Clicked ${this.count} times`;
}
}
```
---
## ⚙️ Alternative: Classic Script Loading
If you're not using ES modules, you can register the controller manually:
```html
```
```js
// /controllers/click-counter.js
class ClickCounterController {
count = 0;
attach(element) {
element.addEventListener('click', this.onClick.bind(this));
}
detach(element) {
element.removeEventListener('click', this.onClick.bind(this));
}
onClick() {
this.count++;
this.element.textContent = `Clicked ${this.count} times`;
}
}
DomController.registerController(ClickCounterController, 'click-counter');
```
---
## ✅ Features
- Declarative behavior with `controller="name"`
- Simple and portable controller classes
- Works with modules or classic scripts
- TypeScript support out of the box
- No framework or build step required