绝大多数场景应选 "open"；"closed" 仅用于封死 js 访问，但不防 css 泄漏且增加维护成本；样式完全隔离需在 shadow root 中用 all: initial 和 all: unset 切断继承链。
shadow DOM 的 mode 选 "closed" 还是 "open"？
绝大多数场景下，选 "open" 就够用；"closed" 会阻断 JS 通过 element.shadowRoot 访问内部结构，调试和动态更新都变困难。除非你明确要封死所有外部干预（比如做第三方 UI 组件 SDK），否则别碰 "closed" —— 它不防 CSS 泄漏，只防 JS 访问，还徒增维护成本。
怎么让按钮样式完全隔离，连 body { font-size: 20px } 都不影响？
关键不是“加 shadow DOM”，而是**在 shadow root 里重置继承链**。默认情况下，shadow 内部仍会继承全局的 font-size、color、line-height 等可继承属性。必须显式切断：
const button = document.createElement('button');
const shadow = button.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<style>
:host {
all: initial; /* 重置所有继承属性 */
display: inline-block;
box-sizing: border-box;
}
button {
all: unset; /* 清空浏览器默认样式 */
background: #007bff;
color: white;
border: none;
padding: 8px 16px;
cursor: pointer;
}
</style><button><slot></slot></button>
`;
document.body.appendChild(button);
注意：:host 控制自定义元素自身，button 控制内部真实按钮；all: initial 比 all: unset 更彻底，它把继承属性设为初始值（如 font-size 变成 medium），避免意外继承。
为什么用了 shadow DOM，按钮还是被全局 button:focus 样式覆盖？
因为 shadow DOM 的样式作用域只对内部生效，**全局 CSS 选择器无法穿透 shadow boundary 匹配内部节点**——但前提是：你没在 shadow 内部用 :host 或 ::slotted 主动暴露接口，也没用 !important 打破层叠优先级。真正的问题往往出在这几点：
- 全局样式写了
button:focus { outline: 2px solid red !important }——!important会压过 shadow 内普通规则 - 你在 shadow 外部用 JS 直接操作了
shadowRoot.querySelector('button').focus()，但没在 shadow 内定义:focus样式 - 用了
<slot></slot>插入外部内容，而 slot 中的元素仍受全局样式影响（slot 本身不创建新边界）
解决方法：在 shadow 内明确写 button:focus { outline: 2px solid #0056b3; }，且不要依赖外部 focus 样式。
要不要用 <template></template> + cloneNode(true)？
要。直接拼接字符串 HTML 容易出 XSS，也难维护。更稳妥的做法是预定义 <template id="isolated-button"></template>，然后克隆使用：
<template id="isolated-button"><style>
:host { all: initial; display: inline-block; }
button { all: unset; background: #007bff; color: white; border: none; padding: 8px 16px; }
</style>
<button><slot></slot></button>
</template>
JS 里这样用：
const tmpl = document.getElementById('isolated-button');
const button = document.createElement('isolated-button');
const shadow = button.attachShadow({ mode: 'open' });
shadow.appendChild(tmpl.content.cloneNode(true));
document.body.appendChild(button);
模板复用安全、语义清晰，还能配合构建工具做预编译。别图省事手写 innerHTML。
真正麻烦的是伪元素（::before）、CSS 变量传递、焦点管理这些边缘情况——它们不总按直觉工作，得一个个实测。shadow DOM 隔离的是样式作用域，不是渲染逻辑，别指望它自动解决所有样式冲突。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
