OpenElement — Web Standards Lab
THE WEB, composed.
A Web Components-native application framework — beautiful, static-first applications composed from real browser primitives.
§1 — Element
One durablecontract.
Custom Elements are the application component contract — not a renderer integration, not a leaf-widget format. Write the element once; it renders on the server and upgrades in the browser.
import { element, OpenElement, property } from '@openelement/element'
@element('open-counter', { root: 'shadow-open' })
export class OpenCounter extends OpenElement {
@property({ reflect: true, attribute: 'count', type: Number })
count = 0
render() {
return (
<button type="button">Count: {this.count}</button>
)
}
}
// SSR: <open-counter count="0"> + DSD shadow root.
// No JavaScript required for first paint.§2 — Declarative Shadow DOM
The server writes HTML.The browser upgrades it.
DSD is a first-class server output — no client re-render, no double payload. The compiled default root is light DOM today; the markup is the application either way.
<open-counter count="0">
<template shadowrootmode="open">
<button>0</button>
</template>└─ <button> → signal bound
first paint = interactive§3 — Islands
Upgradeselectively.
Interactive regions hydrate on your schedule. Non-interactive regions ship no JavaScript of their own.
Critical interactivity, hydrated immediately after parse.
Upgrades when the browser is idle — never blocks paint.
IntersectionObserver gates hydration until scroll-in.
Client-only, for what the server cannot know.
§4 — Output
Static first.Deployable anywhere.
§5 — Begin
Begin.
$deno run -A npm:@openelement/create@alpha my-appThe @alpha dist-tag resolves to 1.0.0-alpha.5 — the current baseline. --minimum-dependency-age 0 keeps same-day compatible patches installable despite Deno's default ~24h minimumDependencyAge.
Facts behind the feeling
Continue the composition.
Every number and claim on this page is sourced from the repository’s release and benchmark truth.