Squark

Web Component utils and base classes.

Installation

``bash
npm install squark
`

SquarkElement

SquarkElement is a base class extending HTMLElement that simplifies Web Component development.

$3

`javascript
import { SquarkElement } from "squark"

const style = new CSSStyleSheet()
style.replaceSync(/css/
my-element {
display: flex;
color: red;
}
)

customElements.define("my-element", class extends SquarkElement {
static observedAttributes = ["value"]
static styles = [style]

constructor() {
super()
this.innerHTML = /html/click
}

mount(signal) {
this.querySelector("button").addEventListener("click", () => {
this.value = (parseInt(this.value) || 0) + 1
}, { signal })
}

update(signal) {
if (signal.aborted) return
const buttonEl = this.querySelector("button")
if (buttonEl) {
buttonEl.textContent = click ${this.value}
}
}
})
``