§1 — Element
一份持久的契约。
Custom Elements 是应用组件契约——不是渲染器集成，也不是叶子组件格式。元素只写一次：在服务端渲染，在浏览器中升级。
无框架运行时JSX + BASIC
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.
// Markup paints and reads with no JavaScript.§2 — 声明式 Shadow DOM
服务端写出 HTML。浏览器就地升级。
DSD 是一等服务端输出——无客户端重渲染、无双重载荷。当前编译默认 root 为 light DOM；两种模式下标记即应用。
服务端 · text/html
<open-counter count="0">
<template shadowrootmode="open">
<button>0</button>
</template>浏览器 · 就地升级#shadow-root (open)
└─ <button> → markup available/readable
upgrade → signals/handlers bound§3 — Islands
按需升级。
交互区域按你的节奏水合；非交互区域自身不携带任何 JavaScript。
load
首屏关键控件，尽早导入并升级。
idle默认
非关键交互，在加载后调度。
visible
IntersectionObserver 把关，滚动进入视口才 hydrate。
only
仅客户端，用于服务端无从知晓的部分。
§4 — 输出
静态优先。随处可部署。
BROWSER纯静态 HTML + DSD。可直接上 CDN，无运行时。
NODEWinterCG 服务端入口，Node 与 Workers 部署可选 Nitro mount。
WORKERS同一页模型产出边缘部署，每次发布附证明门禁。
§5 — 开始
开始。
$npm create @openelement my-app不带版本号的安装从 npm latest dist-tag 解析出当前 1.0 预发布——具体版本用 npm view @openelement/create dist-tags 核实。
感觉背后的事实
继续这场组合。
本页每个数字与声称都取自仓库的发布与基准真值。