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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>`;
}
}
注意：
-
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>预置 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 或重复附加。
