CUSTOM ELEMENTS ✳ SHADOW DOM ✳ DECLARATIVE SHADOW DOM ✳ ES MODULES ✳ SIGNALS ✳ HTML FIRST ✳ CUSTOM ELEMENTS ✳ SHADOW DOM ✳ DECLARATIVE SHADOW DOM ✳ ES MODULES ✳ SIGNALS ✳ HTML FIRST ✳
01
§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.
ZERO RUNTIMEJSX + BASIC
import { defineElement } from '@openelement/element'
export const Counter = defineElement('open-counter', {
render: (props) => (
<button type="button">Count: {props.count ?? 0}</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 the default server output. No client re-render, no double payload — the markup is the application.
Server · text/html<open-counter count="0">
<template shadowrootmode="open">
<button>0</button>
</template>
⟶
Browser · upgrades in place#shadow-root (open)└─ <button> → signal bound
first paint = interactive
§3 — Islands
Upgradeselectively.
Interactive regions hydrate on your schedule. The rest of the page never ships a byte of JavaScript.
Lload
Critical interactivity, hydrated immediately after parse.
IidleDEFAULT
Upgrades when the browser is idle — never blocks paint.
Vvisible
IntersectionObserver gates hydration until scroll-in.
Oonly
Client-only, for what the server cannot know.
§4 — Output
Static first.Deployable anywhere.
BROWSERPure static HTML + DSD. CDN-ready, no runtime.→
NODENitro server output. ISR manifests are forward-compat only — active caching is outside the current contract.→
WORKERSEdge deploys from the same page model. Proof gate per release.→
§5 — Begin
开始。
$deno run -A --minimum-dependency-age 0 npm:@openelement/create my-app
