声明式 Shadow DOM 已获 Chrome 90+、Firefox 91+、Safari 16.4+、Edge（同步 Chromium）稳定支持；不支持时 shadowroot 属性被静默忽略，退化为 light DOM 渲染，且仅适用于已注册的自定义元素，不支持 closed 模式。
声明式 Shadow DOM 的浏览器支持现状
Chrome 90+、Firefox 91+、Safari 16.4+、Edge（同步 Chromium 版本）已稳定支持 shadowroot 属性；旧版 Safari（如 16.3 及更早）和 IE 完全不支持，且无 polyfill 可模拟解析行为。它不是“渐进增强”特性，而是硬性依赖 HTML 解析器原生识别 —— 不支持时，shadowroot 属性会被浏览器静默忽略，内容退化为普通 light DOM 渲染。
<template shadowroot> 必须配合自定义元素使用
直接在 <div> 或 <p> 上写 <template shadowroot> 会失效，因为规范强制要求宿主元素必须是已注册的自定义元素（如 <my-card>）。常见错误是把模板套在普通 div 里，结果样式和结构全跑外面去了。
-
customElements.define('my-card', class extends HTMLElement {})必须在模板前执行，否则解析时找不到构造器 - 模板必须完整包裹所有内容：包括
<style>、<slot>和结构节点，不能只包部分 -
shadowroot属性只能写在<template>标签上，不能写在宿主元素（如<my-card>）上
shadowrootmode 只接受 "open"，大小写敏感
写成 mode="Open" 或 mode="OPEN" 都无效，浏览器会忽略该属性，退化为无 shadow root。目前声明式语法不支持 "closed" 模式 —— 这不是兼容性问题，是规范限制。
这意味着你无法通过声明式方式获得 element.shadowRoot === null 的封闭行为；如果需要完全隔离调试访问，必须回到 JS 的 attachShadow({ mode: 'closed' })。
立即学习“前端免费学习笔记（深入）”；
静态 HTML 场景下如何安全 fallback
声明式 Shadow DOM 本身不提供运行时降级钩子，但你可以利用其“解析失败即退化”的特性做轻量 fallback：
- 在
<template>外层保留一份 light DOM 结构，用<noscript>包裹或 CSS@supports not (selector(:host))隐藏 - 避免在模板内写
onclick或oninput—— 这些事件监听器不会自动绑定，必须由自定义元素类在connectedCallback中补全 - 若需 SSR 输出兼容结构，服务端可检测 UA 或特征字符串，对不支持环境直接输出无
shadowroot的 light DOM 版本
真正容易被忽略的是：声明式 Shadow DOM 的“零 JS 初始化”优势，只在内容完全静态、无需响应属性变更或用户交互时成立；一旦涉及状态驱动渲染，就得补 JS 类逻辑 —— 它不是替代 custom element 的方案，而是它的声明式搭档。
