shadowrootmode 是浏览器自动生成的只读标识，不能控制影子 DOM 创建；真正启用声明式 Shadow DOM 需使用 shadowroot 属性（值为 "open" 或 "closed"），仅适用于可挂载元素，且为一次性初始化指令。
shadowrootmode 属性不是开发者手动设置的渲染开关，它只是浏览器在解析声明式 Shadow DOM 时自动生成的只读标识，**不能用于控制或触发影子 DOM 创建**。
为什么shadowrootmode在<template>上无效
你可能会在 <template shadowrootmode="open"> 这类写法中看到该属性，但实际它不会起任何作用。原因很直接：
-
<template>元素本身不支持声明式 Shadow DOM，它的shadowrootmode是浏览器内部用于标记「该<template>被用来初始化某个 Shadow Root」的元信息，仅在 DevTools 中可见 - 真正启用声明式 Shadow DOM 的元素是普通宿主元素（如
<div>、<my-button>），且需使用shadowroot属性（无mode后缀） - 如果你在
<template>上写shadowroot="open"，浏览器会忽略；写shadowrootmode更是完全无意义
shadowroot 属性才是声明式入口
要在 HTML 中免 JS 创建 Shadow DOM，必须用 shadowroot 属性（注意：没有 mode）：
<div shadowroot="open">
<style>p { color: red; }</style>
<p>This is in shadow</p>
</div>
此时浏览器会自动调用 attachShadow({ mode: 'open' })，并把该元素的内容移到 Shadow Root 中。关键点：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
shadowroot值只能是"open"或"closed"，大小写敏感 - 该属性仅对可挂载 Shadow Root 的元素生效（
<div>、<section>、自定义元素等），不适用于<span>、<p>等不可挂载元素 - 一旦设置，无法通过 JS 修改 —— 它是初始化时的一次性指令，后续改写属性不会重新 attach
调试时看到shadowrootmode别误判为可控配置
在 Chrome DevTools 的 Elements 面板中，当你展开一个已有 Shadow Root 的宿主元素，有时能看到类似 shadowrootmode="open" 的属性显示。这不是你写的，也不是可编辑字段：
- 它是浏览器渲染层生成的只读快照，反映当前 Shadow Root 的
mode值 - 修改它不会改变实际行为；删掉它也不会销毁 Shadow Root
- 真正影响访问性的，是创建时传入
attachShadow()的mode参数，或声明式中shadowroot的值 - 如果你依赖
element.shadowRoot访问内部结构，mode: 'closed'下这个属性永远为null，无论 DevTools 显示什么
最易被忽略的一点：声明式 shadowroot 不支持 delegatesFocus、serializable 等高级选项 —— 这些只能通过 JS 的 attachShadow() 配置。想用它们，就得放弃纯 HTML 方式。
