通读 手册。

四个场景，每张卡片都绑定实现它的仓库文件与构建它的命令。它们是诚实的本地示例：仓库没有托管演示站，因此没有卡片把自己伪装成在线 demo。

先在仓库根目录准备一次：克隆 https://github.com/open-element/openelement 并安装工作区（pnpm install）。之后在同一个根目录执行每张卡片的命令——这些是仓库 fixture，不是已创建应用里的命令。

1. 01静态优先页面

   输出完整 HTML、不需要客户端 JavaScript 的内容页或营销页：文档页、落地页、文章路由。

   源码

   router-static-only fixtureapp/routes/index.tsx

   运行（仓库根目录）

   pnpm --dir tests/fixtures/router-static-only run build

   相关文档

   快速开始

   限制

   仅仓库示例——无托管预览。构建产物落在 fixture 的 gitignored dist/；fixture 直接消费 workspace 源码，证明的是当前检出而非 npm 发布版。

2. 02可复用 Custom Element

   跨页面复用的组件：以编译型 TSX 编写、带 @element / @property 的标准 Custom Element，可按需使用 DSD 影子根。

   源码

   create 起手模板 · my-counterpackages/create/templates/app/islands/my-counter.tsx.tmpl

   运行（仓库根目录）

   npm create @openelement my-app # 然后运行 npm run dev

   相关文档

   核心概念

   限制

   起手计数器只是 demo，不是数据契约；该文件以 .tmpl 形式发布，由生成器写出。无托管预览——快速开始就是运行路径。

3. 03SSR + island

   服务端渲染页面只激活一个交互区域：笔记应用中的计数器 island 在请求时页面上水合。

   源码

   router-native-framework · note-counterapp/islands/note-counter.tsx

   运行（仓库根目录）

   pnpm --dir tests/fixtures/router-native-framework run build

   相关文档

   Islands 与 SSR

   限制

   仅仓库示例——无托管预览。请求时页面需要 Node 服务端：fixture 的 e2e harness 会服务构建产物，证明的是 workspace 源码而非已发布包。

4. 04表单 + 路由

   把校验与路由留在服务端的表单：原生 POST 加重定向，可选客户端增强。

   源码

   router-request-time · page-formapp/components/page-form.tsx

   运行（仓库根目录）

   pnpm --dir tests/fixtures/router-request-time run build

   相关文档

   端到端表单 action

   限制

   需要请求时服务端——这不是静态托管示例。仅仓库示例、无托管预览；配方文档逐步讲解同一套机制。

每张卡片都可以从全新检出按上方所示源码线复现。运行步骤取自各 fixture 自己的 package script，不是编造的命令；请求时场景需要 Node 服务端，静态场景不需要。