Declarative Shadow DOM SSR 与组件水合优化实践

Declarative Shadow DOM SSR 与组件水合优化实践概述Declarative Shadow DOM 允许服务端直出 Shadow DOM 结构，浏览器在解析阶段创建影子根。Chrome/Edge 111+ 与 Safari 16.4+ 已支持。与框架水合需谨慎协作以避免服务端/客户端不一致。关键参数/概念（已验证）`<template shadowrootmode="open">`：声明式影子根，解析期创建。样式隔离：在 `<template>` 内书写组件样式确保封装。框架水合：避免客户端再次创建影子根造成不一致（React 等需忽略模板节点）。实践/示例服务端输出：<my-widget> <template shadowrootmode="open"> <style> .title { font-weight: 600; } </style> <div class="title">Hello</div> </template> </my-widget> 客户端水合要点：通过自定义元素的生命周期钩子读取已存在的影子根，不重复创建。在框架中关闭对 `<template shadowrootmode>` 的操作或进行过滤。验证方法在支持浏览器（Chrome/Edge/Safari）下检查解析后是否存在影子根，并比较首屏耗时。对比 CSR 创建影子根与 DSD 直出在 LCP/CLS 上的差异。注意事项React 等框架的水合需避免模板节点参与 diff，防止不一致错误。非支持浏览器回退为 CSR 方案，保持功能正确。参考资料MDN：Using shadow DOM（Declarative 方式）实践文章：SSR 中使用 DSD 与水合协作（2025）