web-component-base examples

A live gallery of the demos using web components. Each card opens a standalone example page.

v6 behavior demos

Boolean propsbreaking
Presence/absence reflection: toggleAttribute and [flag] selectors work, and any present value is true.
Custom attribute converters
Override toAttribute/fromAttribute for Date and Array props; null removes the attribute.

v5 behavior demos

onChanges payload
camelCase property vs kebab attribute (v5 breaking change).
Prop type enforcement
Default log-and-skip vs static strictProps throwing.
Compile-time prop typesTS
extends WebComponent<typeof props> infers this.props.* from the defaults.
Attribute lifecycle
Empty string stays '', removal resets to default, markup wins.
Lifecycle order
onInit runs before the first render (buffering guarantee).

Core examples

Kitchen sink
Counter, toggle, hello-world, boolean props, onDestroy.
Typed props
number, boolean, string, and object round-trips.
Props blueprint
Non-zero defaults and camelCase↔kebab mapping.
Templating
Lists, links, style attributes — plus a lit-html variant.
Render reconciliation
In-place patching: focus, caret, transitions and prop removal.
Nested composition
Components three levels deep keep their own DOM across an ancestor re-render.
Style objects
Computed, conditional inline styles.
Shadow DOM
Opt in with static shadowRootInit.
Constructable styles
static styles via adopted stylesheets.
Just the parts
html + createElement on a vanilla element.
Single-file penCDN
One self-contained HTML file importing from a CDN.