shadow dom 只能通过 attachshadow() 方法在 javascript 中创建，html 无 shadowrootmode 属性；w3c 拒绝声明式方案因 mode 外参数难表达、ssr 生命周期错乱、解析时竞态等问题；必须在 constructor 或 connectedcallback 中调用且不可重复。
shadowrootmode 属性不存在，不能声明式创建 Shadow DOM
HTML 标准中根本不存在 shadowrootmode 这个属性。这是常见误解，源于混淆了 JavaScript API 与 HTML 声明语法。Shadow DOM 只能通过 attachShadow() 方法在 JS 中创建，HTML 本身不提供任何原生属性来“声明式”启用 Shadow DOM。
为什么没有声明式 Shadow DOM？
W3C 明确拒绝了早期提案（如 shadowroot HTML 属性），主要顾虑包括：
- 无法表达
mode（"open"或"closed"）以外的关键选项，比如delegatesFocus - 服务端渲染（SSR）或静态 HTML 中提前挂载 Shadow DOM 会导致生命周期错乱，例如
connectedCallback触发时机不可控 - 浏览器需在解析时同步构造 Shadow Root，但此时元素可能尚未具备完整属性/子节点，易引发竞态
当前唯一标准方式：用 attachShadow() 创建
必须在 JS 中调用 attachShadow()，且只能在自定义元素的 constructor 或 connectedCallback 中执行（普通元素需确保已插入文档）：
class MyElement extends HTMLElement {
constructor() {
super();
// ✅ 正确：在 constructor 中 attach
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `<p>Hello from Shadow DOM</p>`;
}
}
注意：
-
attachShadow()不可重复调用，否则抛出InvalidStateError: Failed to execute 'attachShadow' on 'Element': Shadow root has already been attached - 不能在
attributeChangedCallback或事件回调里调用，否则可能违反 DOM 规范 -
mode: 'closed'会屏蔽this.shadowRoot访问，调试困难，仅在强封装场景下谨慎使用
想“类声明式”？可用 customElements.define + HTML 模板
虽不能纯 HTML 声明，但可通过组合实现近似效果：
- 用
<template></template>预置 Shadow DOM 结构，避免字符串拼接 - 在自定义元素中克隆模板并 append 到
shadowRoot - 配合
static observedAttributes实现属性驱动更新
示例：
<template id="my-el-tpl"><style>p { color: blue; }</style>
<p><slot>default</slot></p>
</template><script>
const tpl = document.getElementById('my-el-tpl');
class MyEl extends HTMLElement {
connectedCallback() {
if (!this.shadowRoot) {
this.attachShadow({ mode: 'open' }).appendChild(tpl.content.cloneNode(true));
}
}
}
customElements.define('my-el', MyEl);
</script>
这种写法把结构和逻辑分离，比内联字符串更接近“声明感”，但底层仍是 JS 驱动。
真正容易被忽略的是：即使用了 template，shadowRoot 的创建时机仍由 JS 控制——DOM 解析完成 ≠ 元素已连接，connectedCallback 才是安全边界。漏掉这个判断，shadowRoot 就可能为 null 或重复附加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
