- Build lightweight custom elements that browsers & - you understand. -
-Features
--
-
- - A robust API for synchronizing your component's UI and - properties - -
- - ~1 kB base class (minified, compressed) with versatile utilities - -
- - Sensible life-cycle hooks that you understand and remember - -
- - Use the built-in JSX-like syntax or bring your own custom - templating - -
Why use this base class?
-
- Often times, when simple websites need a quick
- custom element, the best way is still to create one extending from
-
- Also, when coming from frameworks with an easy declarative coding - experience (using templates), the default imperative way (e.g., - creating instances of elements, manually attaching event handlers, and - other DOM manipulations) is a frequent pain point we see. -
-- This project aims to address these with virtually zero tooling - required and thin abstractions from vanilla custom element APIs – - giving you only the bare minimum code to be productive. -
-- It works on current-day browsers without needing compilers, - transpilers, or polyfills. -
-
- Here's an interactive custom element:
-
-import { WebComponent, html } from "https://esm.sh/web-component-base";
-
-export class Counter extends WebComponent {
- static props = {
- count: 0
- }
- onInit() {
- // do something...
- }
- get template() {
- return html`
- <button onClick=${() => ++this.props.count}>
- ${this.props.count}
- </button>
- `;
- }
-}
-
-customElements.define("my-counter", Counter);
-