封闭模式（mode: "closed"）下，外部脚本无法访问 shadow root 及其内部节点，element.shadowroot 始终返回 null，无官方 api 可绕过；唯一安全途径是组件主动提供受控接口，如公开方法或事件机制。
Shadow DOM 的封闭模式（mode: "closed"）下，外部脚本无法直接访问 Shadow Root 及其内部节点——这是设计上的隔离机制，不是 bug，而是安全与封装的保障。
封闭 Shadow Root 本身不可获取
当元素通过 element.attachShadow({ mode: "closed" }) 创建 Shadow DOM 后，element.shadowRoot 始终返回 null，即使 Shadow Root 实际存在。浏览器会主动屏蔽对该根节点的引用暴露。
- 没有官方 API 能绕过这个限制（如
getShadowRoot()或反射手段） -
element.getRootNode({ composed: false })在 closed 模式下也只返回该元素自身，而非 Shadow Root - 开发者工具（DevTools）中能看到封闭 Shadow DOM 结构，但 JS 无法编程访问
唯一可行路径：组件主动提供访问接口
若你控制该自定义元素的实现，应在组件内部暴露可控的、有边界的访问方法，而不是试图“突破”封闭性。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 在 custom element 类中定义公开方法，例如
getElementById(id)或querySelector(selector) - 使用
slot或事件机制让外部间接影响内部状态（如 dispatch 自定义事件 + 内部响应） - 示例：
class MyWidget extends HTMLElement {<br> constructor() {<br> super();<br> this._shadow = this.attachShadow({ mode: "closed" });<br> this._shadow.innerHTML = `<input id="user-input">`;<br> }<br> getUserInput() { return this._shadow.getElementById("user-input"); }<br>}
非封闭模式（open）是调试与协作的前提
如果组件不需强隔离，建议默认使用 mode: "open"。此时 element.shadowRoot 可正常读取，所有标准 DOM 方法（querySelector、childNodes 等）均可使用。
- 绝大多数 Web Components 生态（如 Lit、Shoelace）都基于 open 模式构建和测试
- 仅在明确需要防止外部篡改内部结构时（如浏览器内置控件模拟），才选用 closed
- 注意：
closed不防 XSS 或恶意扩展，它主要防误用，而非安全边界
不要尝试 hack 方式获取 closed root
某些老旧资料提到通过 getOwnPropertyDescriptor 或原型链探测等技巧，这些在现代浏览器（Chrome 90+、Firefox 85+、Safari 16.4+）中均已失效或被移除。
- 依赖未公开内部属性（如
element.#shadowRoot）属于非法访问，行为不可靠且随时可能中断 - 自动化测试中若需断言 Shadow 内容，应由组件提供测试专用 hook（如
__testGetShadowRoot()），并在生产构建中剔除
