Base Element is a javascript Class that extends HTMLElement and provides a set of properties and methods for creating custom web components.

Some random web components

Created with the help of Base Element.

Button

Why and when to use Base Element?

No dependencies

You don't need npm or any dependencies. Just a js file.

No tools needed

No build tools, no transpilers, no bundlers, no frameworks.
Just import a js file.

Lightweight and fast

Small footprint, fast loading. Just a ~1.7kb file (0.8kb gzipped).

Getting started

  1. Download base-element.js from GitHub's Base Element repository to your project.
  2. Create a new file for your web component.
  3. Import base-element.js in your component file like this: import { BaseElement } from "./path/to/base-element.js".
  4. Use BaseElement as a base class for your custom elements.

Here's the boilerplate of a custom element:

/* webcomponents/MyComponent.js */ import { BaseElement } from "./path/to/base-element.js" class MyComponent extends BaseElement { properties = { // your component's properties here } styles() { return /* css */` // your css styles here ` } beforeRender() { // your before render logic here } render() { return /* html */` // your html template here ` } mounted() { // your mounted logic here } updated(property, oldValue, newValue) { // your updated logic here } } customElements.define("my-component", MyComponent);

Now, a Counter component:

/* webcomponents/Counter.js */ import { BaseElement } from "./path/to/base-element.js" class Counter extends BaseElement { #incrementButton #decrementButton #input properties = { count: { value: 0, type: Number } } styles() { return /* css */` .counter { display: flex; gap: 1rem; max-width: 13rem; } base-input::part(input) { text-align: center; } ` } render() { return /* html */`
- +
` } mounted() { this.#incrementButton = this.shadowRoot.getElementById("increment") this.#decrementButton = this.shadowRoot.getElementById("decrement") this.#input = this.shadowRoot.getElementById("input") this.#incrementButton.addEventListener("click", () => { this.count++ this.#input.value = this.count }) this.#decrementButton.addEventListener("click", () => { this.count-- this.#input.value = this.count }) } } customElements.define("base-counter", Counter);

Contributing

Contributions are welcome! Please read README for more information.