Squark

Web Component utils and base classes.

Installation

npm install squark

SquarkElement

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

Usage

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*/`<button>click</button>`
	}

	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}`
		}
	}
})