Declarative Shadow DOM（DSD）通过在HTML中直接声明<template shadowrootmode="open">使搜索引擎可索引Shadow DOM内容，无需JS执行，要求服务端输出含内联样式的完整静态结构，并兼顾无JS降级与语义完整性。
直接在 HTML 中声明 Shadow DOM 结构，搜索引擎就能像读普通 HTML 一样索引组件内容，这是 Declarative Shadow DOM（DSD）带来最实在的 SEO 改进。它不需要等 JS 执行，服务端就能输出完整、语义清晰、带样式的组件结构。
确保 Shadow DOM 内容在 HTML 源码中可见
核心是让组件的 shadow root 和其中所有文本、标签、属性都作为静态 HTML 出现在初始响应里。爬虫抓到的 HTML 文件必须包含 <template shadowrootmode="open"> 及其内部全部内容，而不是空壳标签加一段 JS 脚本去动态挂载。
- 使用
<template shadowrootmode="open">或<template shadowrootmode="closed">直接嵌套在自定义元素内，不要依赖attachShadow() - 模板内需包含真实文本节点（如
<h2>产品标题</h2>），避免占位符或 JS 渲染逻辑 - 组件的轻 DOM（light DOM）内容也应保留，例如插槽默认内容或 fallback 文本，增强语义完整性
服务端渲染时保持结构与样式同步输出
SSR 模板引擎（如 Express + EJS、Next.js App Router、Astro）需原生支持解析并保留 shadowrootmode 属性及内部结构。不能把 <template> 当作普通模板语法过滤掉，也不能将样式剥离到外部 CSS 文件而破坏封装性。
- 样式必须内联在
<template>内部的<style>标签中，确保作用域隔离且无需额外请求 - 若使用 CSS-in-JS 方案（如 Emotion），需确认其 SSR 模块（如
emotion-server）能识别 DSD 并将对应样式注入到模板内，而非只注入全局 style 标签 - 避免在服务端做“模拟水合”——即用 JS 创建 shadow root 后再序列化为字符串；这会丢失语义，且可能被爬虫忽略
兼顾渐进增强与降级兼容
DSD 是现代浏览器标准，但 SEO 友好不等于只靠新特性。设计时要让组件在无 JS 或旧浏览器中仍可读、可访问。
- 组件宿主标签（如
<product-card>）本身应有合理语义，比如含role="region"或 ARIA 标签 - 轻 DOM 内容作为后备：当 DSD 不被支持时，浏览器会直接渲染
<template>外的内容，这部分应包含关键信息摘要 - 避免仅靠
:host或::slotted实现核心排版——这些在无 Shadow DOM 环境下不生效，需用基础 CSS 保障可读性
验证是否真正生效
上线前务必检查生成的 HTML 源码和爬虫视角是否一致：
- 禁用浏览器 JavaScript 后查看页面源代码（Ctrl+U），确认
<template shadowrootmode="open">及其子节点完整存在 - 用 Google Search Console 的“URL 检查”工具预览渲染结果，观察标题、描述、正文是否包含 Shadow DOM 内文本
- 使用 curl 或 Puppeteer 获取纯 HTML 响应，grep 搜索关键词，确认它们出现在
<template>内部而非 JS 字符串中
