web-component-base examples

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

v5 behavior demos

onChanges payload
camelCase property vs kebab attribute (v5 breaking change).
Prop type enforcement
Default log-and-skip vs static strictProps throwing.
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.
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.