ElementInternals.shadowRoot 在关闭模式下始终返回 null，因其仅代理开放模式的 ShadowRoot，且 closed 模式严格禁止 JS 访问，唯一获取方式是在 attachShadow 调用时立即保存返回值。
ElementInternals.shadowRoot 在关闭模式下始终返回 null
不能通过 ElementInternals.shadowRoot 访问关闭（closed）模式的 Shadow DOM —— 这是设计使然。该属性只在 Shadow DOM 处于开放（open）模式时返回 ShadowRoot 实例；关闭模式下一律返回 null，且无任何例外或绕过方式。
为什么 ElementInternals 不提供对 closed shadowRoot 的访问
ElementInternals 的定位是让自定义元素安全地参与表单、可访问性与伪类（如 :valid）等标准机制，不是通用 Shadow DOM 操作接口。它的 shadowRoot 属性只是对元素自身 attachShadow({ mode: 'open' }) 所创建根节点的只读代理，不承担暴露封闭内部结构的责任。
- 关闭模式的核心语义就是“封装隔离”，浏览器必须阻止外部（包括宿主元素自身以外的代码）获取其
ShadowRoot -
ElementInternals实例本身由浏览器内部创建，它不持有对 closed root 的引用，也无权突破封装边界 - 即使你在自定义元素类中用
attachShadow({ mode: 'closed' })创建了 Shadow DOM，this.internals().shadowRoot依然为null
想操作 closed shadowRoot？只能在 attach 时保存引用
唯一可行路径是在调用 attachShadow 的**同一执行上下文**中立刻保存返回值 —— 因为只有那一刻你还能拿到它。之后所有外部访问（包括 ElementInternals.shadowRoot、this.shadowRoot 或从其他 JS 上下文查询）都失效。
class MyWidget extends HTMLElement {
constructor() {
super();
// ✅ 必须在这里保存，且仅限本实例私有变量
this.#shadow = this.attachShadow({ mode: 'closed' });
}
#shadow; // 私有字段，仅类内可访问
connectedCallback() {
this.#shadow.innerHTML = '<p>Hello from closed shadow</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="overflowclass">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p class="overflowclass">使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>';
// ❌ this.internals().shadowRoot === null
// ❌ this.shadowRoot === null
}
}
- 不能依赖
this.shadowRoot或internals().shadowRoot获取 closed 根节点 - 不能在
connectedCallback或事件回调里再调用attachShadow补救（会抛InvalidStateError） - 若需跨方法操作，必须把
#shadow存为私有字段或闭包变量，不可暴露给外部
误判 closed shadowRoot 是否存在的常见错误
开发者常因以下现象误以为“能间接访问”：console.dir(this) 显示 shadowRoot: null 却仍能在 DevTools 中看到 shadow 节点；或发现 getInnerHTML() 类似方法在测试中“似乎生效”。这些都不是真实访问。
- DevTools 渲染的是渲染树信息，不等于 JS 可访问对象 —— 它能显示 closed shadow 是调试器特权，JS 层面不可仿效
- 某些测试库（如 Jest + jsdom）不完全实现 closed mode 语义，返回伪造的
shadowRoot，上线后必然失效 - 试图用
document.querySelector('my-widget').shadowRoot或element.getRootNode()都会在 closed 模式下得到null
封装边界的严肃性就体现在这里：一旦设为 closed，JS 层面的访问能力在 attach 完成瞬间就永久终止，没有回旋余地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
