# web-component-base (wcb)

> A zero-dependency base class for building reactive custom elements. Subclass `WebComponent`, declare `static props` and a `template`, and any change to an observed attribute re-renders the component. The runtime is ~2 kB brotli-compressed, and it needs no compiler, decorators or build step.

- Install: `npm i web-component-base` — or scaffold a project with `npm create wcb@latest`
- Import from a CDN with no build step: `import { WebComponent } from "https://esm.sh/web-component-base"`
- Package: https://npmx.dev/package/web-component-base
- Source: https://github.com/ayo-run/wcb
- License: MIT

Components render into the light DOM by default; shadow DOM is opt-in per component. State lives in attributes, so a component can be server-rendered as plain HTML by any server, with no framework-specific SSR integration.

## Guides

- [Getting Started](https://webcomponent.io/getting-started/): Scaffold a component with npm create wcb, or install web-component-base and write your first reactive custom element by hand.
- [Why would anyone use WCB?](https://webcomponent.io/why/): Five reasons to reach for wcb — the cheapest runtime reactivity, no build step, HTML-native attributes — and when it is the wrong choice.
- [wcb vs Lit vs FAST: size and feature comparison](https://webcomponent.io/comparison/): Measured bundle sizes and a feature-by-feature table for web-component-base, Lit, Elena and FAST, with the method to reproduce the numbers.
- [Usage](https://webcomponent.io/usage/): Declare static props and a template getter, then drive the component from HTML — attributes are the reactive state.
- [Examples](https://webcomponent.io/examples/): A gallery of runnable wcb demos with their source: boolean props, attribute converters, templating, shadow DOM, lifecycle and more.
- [Add your demo to the showcase](https://webcomponent.io/showcase/): The whole path from `npm create wcb@latest` to a card on the homepage — build a component, put its demo page online, and add one entry to the showcase data file.
- [template vs render()](https://webcomponent.io/template-vs-render/): How the read-only template getter relates to render(), when render() is called for you, and how to override it for another templating library.
- [Prop Access](https://webcomponent.io/prop-access/): Read and write observed attributes as camelCase through this.props, with typed props, boolean semantics and custom attribute conversion.
- [Using the Shadow DOM](https://webcomponent.io/shadow-dom/): Opt a component into shadow DOM with static shadowRootInit, and what the ShadowRootInit options change.
- [Styling](https://webcomponent.io/styling/): Two ways to scope styles in a wcb component: style objects on the html template, or constructable stylesheets with a shadow root.
- [Using Just Some Parts](https://webcomponent.io/just-parts/): Use html, createElement and the other internals on a plain HTMLElement, without extending the WebComponent base class.
- [Life-Cycle Hooks](https://webcomponent.io/life-cycle-hooks/): The four lifecycle hooks — onInit, afterViewInit, onChanges and onDestroy — when each one fires and what belongs in it.
- [CEM Analyzer Plugin](https://webcomponent.io/cem-plugin/): Teach the Custom Elements Manifest analyzer to read static props, so Storybook and editor autocomplete can see your attributes.
- [Library Size](https://webcomponent.io/library-size/): What the WebComponent base class weighs, min + brotli, how size-limit measures it, and where every byte change is recorded.

## API Reference

- [WebComponent](https://webcomponent.io/api/web-component/): The WebComponent base class: static configuration, instance members, lifecycle hooks and attribute converters.
- [html](https://webcomponent.io/api/html/): The html tagged template function and the vnode shape it produces.
- [Utilities](https://webcomponent.io/api/utils/): Case conversion, attribute serialization, element creation and the vnode reconciler.
- [cem-plugin](https://webcomponent.io/api/cem-plugin/): The wcbStaticProps CEM analyzer plugin.

## Optional

- [Full documentation](https://webcomponent.io/llms-full.txt): every page above concatenated as plain Markdown, in one request.
- [Runnable demos](https://demo.webcomponent.io/): each example as a standalone page with its source.