# web-component-base > A zero-dependency & tiny JS base class for creating reactive custom elements easily Latest version **6.2.1** (published 2026-08-10) · MIT license · 0 weekly downloads ## Install ```sh npm install web-component-base pnpm add web-component-base yarn add web-component-base bun add web-component-base ``` ## Health **Score 75/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 6.2.1 | | Published | 2026-08-10 | | First published | 2023-09-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 48.9 KB | | Known vulnerabilities | 0 | | Install scripts | yes | | Provenance | attested (GitHub Actions) | | GitHub stars | 80 | | Author | Ayo Ayco | | Maintainers | aayco | | Keywords | web components, web component, custom elements, custom element, lightweight, tiny, zero dependency, reactive, base class, no build step, buildless, lit alternative, vanilla js, html | ## Links - npm: https://www.npmjs.com/package/web-component-base - Repository: https://github.com/ayo-run/wcb - Homepage: https://WebComponent.io - Issues: https://github.com/ayo-run/wcb/issues - npm.io page: https://npm.io/package/web-component-base ## Alternatives - [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads - [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads - [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads - [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads - [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads ## Recent versions - 6.2.1 (latest) — 2026-08-10 - 7.0.0-beta.1 (beta) — 2026-08-08 - 0.0.0-experimental.14 (experimental) — 2023-12-18 - 6.2.0 — 2026-08-08 - 6.1.6 — 2026-07-26 - 6.1.5 — 2026-07-25 - 6.1.4 — 2026-07-24 - 6.1.3 — 2026-07-24 - 6.1.2 — 2026-07-24 - 6.1.1 — 2026-07-20 - 6.1.0 — 2026-07-20 - 6.0.0 — 2026-07-20 - 5.2.0 — 2026-07-19 - 5.1.0 — 2026-07-19 - 5.0.1 — 2026-07-05 - … 144 more at https://npm.io/package/web-component-base/versions ## README # Web Component Base > [!Note] > **HTML boolean attributes semantics shipped in v6** - A boolean > prop follows the HTML convention in both directions: **presence means `true`, > absence means `false`**. `true` reflects as a bare attribute and `false` > removes it, so `toggleAttribute()` and `[attr]` CSS selectors finally work as > expected. > > **Any present value is `true`** — including the literal `flag="false"`, just > like native `disabled="false"` is still disabled. If you write boolean > attributes as `setAttribute(name, String(bool))`, that now always means > `true`; switch those call sites to `toggleAttribute(name, bool)`. wcb warns > in the console when it sees a boolean attribute written as `"true"`/`"false"` > so the change cannot fail silently. Attributes whose `"false"` is meaningful > (`aria-*`, `contenteditable`) should be declared as **string** props. > > See [Prop Access](https://webcomponent.io/prop-access/#boolean-props) for details. ![counter example code snippet](https://git.ayo.run/ayo/wcb/raw/branch/main/assets/IMG_0682.png) [![Package information: NPM version](https://img.shields.io/npm/v/web-component-base)](https://npmx.dev/package/web-component-base) [![Package information: NPM license](https://img.shields.io/npm/l/web-component-base)](https://npmx.dev/package/web-component-base) [![Package information: NPM downloads](https://img.shields.io/npm/dt/web-component-base)](https://npmx.dev/package/web-component-base) [![Bundle Size](https://img.shields.io/bundlephobia/minzip/web-component-base)](#library-size) 🤷‍♂️ zero-dependency, 🤏 tiny JS base class for creating reactive [custom elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components/Using_custom_elements) easily ✨ When you extend the `WebComponent` class for your component, you only have to define the `template` and `properties`. Any change in any property value will automatically cause just the component UI to render. The result is a reactive UI on property changes. ## Quick start The fastest way to try wcb is to scaffold a new component: ```bash npm create wcb@latest ``` ### Next actions: 1. [Read the docs](https://webcomponent.io) 2. [View demos with code examples](https://demo.webcomponent.io/) 3. [Play with a demo on CodePen](https://codepen.io/ayo-run/pen/ZEwoNOz?editors=1010). 4. [Try it on TypeScript playground](https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgdQKYCMDCFwQHap4wA0cAFjCADZwC+cAZlDnAOQDuGAtAMY6QEiXdAEMAzqlYAoKQHoAVPKlx5cACKoeVEVFRwRcGAE8wehtDhGIAVyhwABmJgiYwHnDDMwY+8tUBJeGAxODwIeF0AR2tgXQATRgt2HnRDCDh2aABrUnRrCJcyVDsRPD84CDAYLmA8OD5wYCpULlcQPWNTODERBlRjDOAYMjgAFRNUMR4oYCrygAEJPQoYbwAuWVlOdAaBQhgAOmAIWU9KrhEeHkmxWQBiSura1om4rjPvGrwX0ymZuZUsiknT0yBSACF8jB8AAFLwhAC8iGUcG06FQVDW3RgMzwAHMUXFgiJ0M04lj0BAIM1SiitG4smIsXhrCB0VApLQZAolCo4ABBbE6GDFer8fD7A5wACiADdikY4FlUIrag4nC43B54fY4MF9HBdJdXPLtZVisZyroGM0eCKEtCDcrROheOJUAkXDjgHkRXBACgEGRmrnxDmGwQOHzEB3pPEZAGp474+dYwHEXJNDEV9DBvb69KUErouLo8HFitG-EDUAAPSCweraMQhMHoSG5-BwWsisstjDYXCCGAAHlb7eheDhlTEAD5kXAha53FGsWOobD4XAkQgUQu0RisaxMFQGXB2qxiLu4ESeqSPViGCIqBJLwuF7HGViAAyvugyBd5OAW5wAAFAAlFuc47m+eoMKBACE4bRlGBw3iSZIQUhkbwjGJ5xmIiYolyKJ4v0hioOA2giuB85vroMC2HUFDUMmMFwMOvoThUeAfgiAAkCBYYBYD0Ghd5xPxglkBGKFiWStAzleMECVhKH7lQ9CBip0nIThH5iLQADrSnsbInH4IpMGsVyxE8NYTg4NKzTtEQ0blgwtSoCBHApMI654BeKAQv5YFSEAA) ## Want to get in touch? There are many ways to get in touch: 1. Open a [GitHub issue](https://github.com/ayo-run/wcb/issues/new) or [discussion](https://github.com/ayo-run/wcb/discussions) 1. Submit a ticket on [SourceHut todo](https://todo.sr.ht/~ayoayco/wcb) or via [Email](mailto:~ayoayco/wcb@todo.sr.ht) ## Inspirations and thanks 1. [Sara Rainsberger](https://rainsberger.ca/) - I never stop singing praises to the Astro documentation team and I use Sarah's ["50 docs tips in 50 days"](https://www.rainsberger.ca/docs-tips/) as a guide in reviewing the [documentation for wcb](https://webcomponent.io). I do not have a team myself, and do not have the level of excellence Sarah brings to reviewing docs. I often need the assistance and have encodified a [docs-review skill](https://github.com/ayo-run/wcb/blob/main/.claude/skills/docs-review/SKILL.md) for it _with permission_. 1. [htm](https://github.com/developit/htm) - I use it for the `html` function for tagged templates, and take a lot of inspiration in building the rendering implementation. It is highly likely that I will go for what Preact is doing... but we'll see. 1. [fast](https://github.com/microsoft/fast) - When I found that Microsoft has their own base class I thought it was super cool! 1. [lit](https://github.com/lit/lit) - `lit-html` continues to amaze me and I worked to make `wcb` generic so I (and others) can continue to use it ## Size change log See [`size-change-log.md`](./size-change-log.md) for a running record of how each correctness/feature change affects the `WebComponent` base class bundle size, with the reason and benefit of each. ## Background This is the base class used for web components in Ayo's projects, primarily [cozy-games](https://git.ayo.run/ayo/cozy-games), [mcfly](https://git.ayo.run/ayo/mcfly/), his [personal site](https://ayo.ayco.io), his [blog](https://ayos.blog), and [others](https://git.ayo.run/ayo). --- _Just keep building._
_A project by [Ayo](https://ayo.ayco.io)_ --- _Source: https://npm.io/package/web-component-base · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._