EnglishSwitch to English
打开导航

OpenElement — Web 标准实验室

组合而生的 Web。

The OpenElement dragon — it turns its head to watch your cursor.

Web Components 原生应用框架——用真实的浏览器原语,组合出美观的 static-first 应用。

版本公开注册表 — element v0.43.3 · create v0.43.3 · ui v0.43.3 · router v0.41.0-alpha.6四个包尚无统一已发布的稳定版本
包图四个包
CI 引擎CI 中 3 个
框架依赖element 为零
服务端输出DSD 一等公民

§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.
// No JavaScript required for first paint.

§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> → signal bound first paint = interactive

§3 — Islands

按需升级。

交互区域按你的节奏水合;非交互区域自身不携带任何 JavaScript。

load

关键交互,解析完成后立即 hydrate。

导航 · 搜索 · 主题
idle默认

浏览器空闲时升级——绝不阻塞绘制。

计数器 · 表单
visible

IntersectionObserver 把关,滚动进入视口才 hydrate。

评论 · 图表
only

仅客户端,用于服务端无从知晓的部分。

WebGL · 媒体

§4 — 输出

静态优先。随处可部署。

BROWSER纯静态 HTML + DSD。可直接上 CDN,无运行时。
NODENitro 服务端输出。静态优先分发,动态路由由生成的请求时入口承接。
WORKERS同一页模型产出边缘部署,每次发布附证明门禁。

§5 — 开始

开始。

$deno run -A npm:@openelement/create@alpha my-app

@alpha dist-tag 解析到 1.0.0-alpha.5——即当前基线。 --minimum-dependency-age 0 可绕过 Deno 默认约 24 小时的 minimumDependencyAge,使当天发布的兼容补丁仍可安装。

感觉背后的事实

继续这场组合。

本页每个数字与声称都取自仓库的发布与基准真值。