# @webtides/element-js

> Simple and lightweight base classes for web components with a beautiful API. Dependency free.

Latest version **1.2.12** (published 2026-06-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @webtides/element-js
pnpm add @webtides/element-js
yarn add @webtides/element-js
bun add @webtides/element-js
```

## Health

**Score 55/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; has provenance.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 1.2.12 |
| Published | 2026-06-24 |
| First published | 2021-01-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 194.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 30 |
| Author | @webtides |
| Maintainers | lukas-schardt, eddyloewen, quarkus |
| Keywords | web components, web component, components, component, custom elements, elements, element, element-js, shadow-dom |

## Links

- npm: https://www.npmjs.com/package/@webtides/element-js
- Repository: https://github.com/webtides/element-js
- Homepage: https://github.com/webtides/element-js#readme
- Issues: https://github.com/webtides/element-js/issues
- npm.io page: https://npm.io/package/@webtides/element-js

## Recent versions

- 1.2.12 (latest) — 2026-06-24
- 1.0.0-alpha.13 (next) — 2024-05-08
- 1.2.11 — 2026-04-21
- 1.2.6 — 2025-10-27
- 1.2.5 — 2025-09-04
- 1.2.4 — 2025-09-03
- 1.2.3 — 2025-08-26
- 1.2.1 — 2025-08-21
- 1.2.0 — 2025-06-13
- 1.1.8 — 2025-04-09
- 1.1.7 — 2025-02-17
- 1.1.6 — 2025-01-23
- 1.1.5 — 2024-11-14
- 1.1.4 — 2024-11-12
- 1.1.3 — 2024-11-11
- … 39 more at https://npm.io/package/@webtides/element-js/versions

## README

# element-js

Simple and lightweight base classes for web components with a beautiful API. Dependency free.

## Introduction

`element-js` lets you write simple, declarative and beautiful web components without the boilerplate.

## How to use

#### Installation

install `element-js`

```sh
npm install --save @webtides/element-js
```

#### Use / Example Element

`element-js` elements are plain ES6 classes (vanilla JS) with some nice mappings (eg. properties, watch, etc.).

```javascript
// Import from a CDN
// import { BaseElement, defineElement } from 'https://unpkg.com/@webtides/element-js';
// import { BaseElement, defineElement } from 'https://cdn.skypack.dev/@webtides/element-js';
// or when installed via npm
import { BaseElement, defineElement, Store } from '@webtides/element-js';

const sharedDate = new Store({ date: Date.now() });

class ExampleElement extends BaseElement {
    // normal public properties
    greeting = 'Hello';
    name = 'John';

    // lifecycle hook
    connected() {
        this.greet();
    }

    // reactive attributes/properties
    properties() {
        return {
            familyName: 'Doe',
            sharedDate
        };
    }

    // watchers for property changes
    watch() {
        return {
            familyName: (newValue, oldValue) => {
                console.log('familyName changed', newValue, oldValue);
            }
        };
    }

    // computed property
    get computedMsg() {
        return `${this.greeting} ${this.name} ${this.familyName} ${this.sharedDate.date}`;
    }

    // method
    greet() {
        alert('greeting: ' + this.computedMsg);
    }
}
defineElement('example-element', ExampleElement);
```

To use this element, just import it and use it like any other HTML element

```html
<script type="module" src="example-element.js" />
<example-element family-name="Smith"></example-element>
```

## Documentation

For detailed documentation see the [Docs](docs/README.md).

## Contributing & Development

For contributions and development see [contributing docs](.github/CONTRIBUTING.md)

## License

`element-js` is open-sourced software licensed under the MIT [license](LICENSE).

---
_Source: https://npm.io/package/@webtides/element-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._