Use alpinejs with web components and shadow root
This library helps you with using AlpineJS with web components. This includes web components using shadow root.
1. Make sure you have AlpineJS installed and ready.
2. Install this library by running npm i alpine-web-components
3. Use classes AlpineWebComponent or AlpineComponent as base classes.
The following example shows you a basic "Counter" example.
``ts
import AlpineWebComponent from "alpine-shadow-component";
import type {State} from "../../AlpineWebComponent";
interface CounterState extends State {
counter: number,
}
class Counter extends AlpineWebComponent {
state: CounterState = {
attributes: {},
counter: 1,
}
template =
resetCounter() {
this.state.counter = 1
}
useShadow(): boolean {
return false;
}
}
window.customElements.define('my-counter', Counter);
`
You should now be able to reference the counter with
Please see directory example` for example on how to bind / update attributes etc..