---

title: Declarative Shadow DOM：SSR 友好的 Web Components

keywords:

• Declarative Shadow DOM
• Web Components
• SSR
• shadowrootmode
• 组件封装

description: 介绍声明式 Shadow DOM 的语法与渲染流程，在服务端输出组件封装结构，提升首屏与可访问性，简化客户端 hydrate。

date: 2025-11-27

sources:

• https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot#declarative_shadow_dom
• https://web.dev/declarative-shadow-dom/

categories:

• 文章资讯
• 编程技术

---

概述

Declarative Shadow DOM 允许在 HTML 中直接声明 <template shadowrootmode="open">，浏览器在解析阶段构造 ShadowRoot，利于 SSR 与渐进增强。

示例（已验证）

<my-card>
  <template shadowrootmode="open">
    <style>:host{display:block}</style>
    <slot name="title"></slot>
    <slot></slot>
  </template>
  <h2 slot="title">Title</h2>
  <p>Content</p>
  </my-card>

实践建议

• 与样式隔离结合（:host、@layer）；保留无 Shadow 的回退结构