shadowrootmode 并非 html 属性，不存在于标准中；声明式 shadow dom 正确写法是 或 ，仅作用于已注册自定义元素的首个 子节点，且不可通过 js 动态设置。
shadowrootmode 是什么，能不能直接写在 HTML 标签上？
不能。HTML 标签上没有 shadowrootmode 这个属性——它根本不存在于标准 HTML 中，也不是合法的全局属性或自定义属性名。你看到的可能是对 attachShadow() 的 mode 参数的误解，或是某些实验性提案（如 Declarative Shadow DOM）的混淆。
原生声明式 Shadow DOM 的正确入口是 <template shadowroot="open"></template> 或 <template shadowroot="closed"></template>，这是 Chrome 90+ 支持的正式特性，用于在 HTML 解析阶段自动挂载 Shadow Root，无需 JS 调用 attachShadow()。
如何正确使用声明式 Shadow DOM（Declarative Shadow DOM）
它只作用于 <template></template> 元素，且必须满足两个硬性条件：该 <template></template> 必须有 shadowroot 属性，并且其父元素必须是自定义元素（即已用 customElements.define() 注册过的标签）。
-
shadowroot="open"和shadowroot="closed"是唯一允许的值，大小写敏感，不支持其他字符串或布尔写法 - 模板内容不会被渲染为普通 DOM，而是作为 Shadow Root 的
innerHTML自动附加到父自定义元素上 - 必须确保自定义元素类中 **不手动调用**
attachShadow()，否则会冲突并抛出Failed to execute 'attachShadow' on 'Element': The element already has a shadow root. - 服务端渲染（SSR）友好，但需注意：若模板里引用了未注册的自定义元素，它们在首次解析时不会升级，需后续调用
customElements.upgrade()
<my-button><template shadowroot="open"><style>button { background: #007bff; }</style>
<button><slot>Click me</slot></button>
</template></my-button>
为什么写了 shadowroot 却没生效？常见失效原因
声明式 Shadow DOM 极其“娇气”，以下任一条件不满足都会静默失败（无报错，但 Shadow Root 不创建）：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 父元素不是已注册的自定义元素（例如写成
<div><template shadowroot="open">...</template></div>—— 完全无效） -
<template></template>没有直接作为自定义元素的**首个子节点**（中间插了个文本节点、注释或空格都会破坏匹配） - 浏览器不支持：仅 Chromium 90+、Firefox 115+（需开启
dom.webcomponents.declarative_shadow_dom.enabled）、Safari 尚未支持 - 自定义元素类定义晚于 HTML 解析（即
customElements.define()在<my-button></my-button>出现之后才执行）
和 attachShadow() 的 mode 参数有什么关系？
完全无关。JS 中调用 element.attachShadow({ mode: 'open' }) 的 mode 是对象属性，而声明式 Shadow DOM 的 shadowroot="open" 是 HTML 属性，二者语义一致（控制 shadowRoot 是否可被 JS 访问），但实现机制、触发时机和约束完全不同。
混用风险很高：如果自定义元素构造函数里写了 this.attachShadow({ mode: 'open' })，又同时在模板里写了 shadowroot="open"，就会触发上述冲突错误。实际项目中建议二选一，优先用声明式（更轻量、可 SSR），除非需要动态控制 Shadow Root 创建时机。
真正容易被忽略的是：声明式 Shadow DOM 的 shadowroot 属性不可通过 getAttribute() 读取（它在解析后即被消费并移除），也不能用 setAttribute('shadowroot', 'closed') 动态添加生效——它纯属解析时的一次性指令。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
