shadowroot 能隔离样式，但需满足条件：必须通过 attachshadow() 创建（mode 为 "open" 或 "closed"），且样式须内联或置于 shadowroot 内的 中；继承性属性如 color 可跨边界传递，非继承属性和 @font-face 则不能。
什么是 shadowRoot，它真能隔离样式？
能，但不是无条件的。只有通过 attachShadow() 创建的 shadowRoot（且 mode 为 "closed" 或 "open"）才构成真正的边界；这个边界会阻止外部 CSS 选择器穿透到影子树内部，也阻止内部未加 :host 等修饰的选择器意外影响外部——但前提是没用 !important + 全局选择器暴力覆盖，也没在影子树里主动用 document.styleSheets 注入全局样式。
常见错误现象：div { color: red; } 写在页面 里，却意外染红了 shadow 内部某个没设色的 <span></span>——这说明你用了 mode: "open" 却忘了给影子节点设 class 或 style，而浏览器按 CSS 继承规则把颜色传进去了；继承不是穿透，是合法行为。
如何正确创建并使用 shadowRoot 封装样式
关键不在“创建”，而在“怎么写样式”和“怎么挂载”。attachShadow() 只是起点，真正起隔离作用的是影子树内联样式或 <style></style> 标签的范围限定。
- 必须显式向
shadowRoot插入<style></style>，不能依赖外部<link rel="stylesheet">——后者加载的是全局样式表，不进入影子边界 -
:host用于选中宿主元素自身（即调用attachShadow()的那个元素），:host-context(...)已废弃，别用 - 想让外部传入的 class 生效？得在
:host(.my-theme)里定义响应逻辑，否则 class 白加 - 避免在影子树里用
document.querySelector('body')这类全局查询——它查不到影子内的节点，容易误判
示例：
const el = document.createElement('my-card');
el.attachShadow({ mode: 'open' });
el.shadowRoot.innerHTML = `
<style>
:host { display: block; border: 1px solid #ccc; }
.content { font-size: 14px; color: var(--text-color, black); }
</style><div class="content"><slot></slot></div>
`;
shadowRoot 下的 CSS 变量和字体为什么有时不生效？
CSS 自定义属性（变量）默认可跨影子边界继承，但仅限**继承性属性**（如 color、font-size），非继承属性（如 background、border）不会自动透传。字体（@font-face）则完全不继承——每个影子树需单独定义或由外部提前注入到 document。
- 在宿主元素上设置
style="--text-color: blue;"，影子内.content的color: var(--text-color)才能生效 - 如果影子内用了
font-family: 'Fira Sans';，但没在document或影子<style></style>里声明@font-face，就会回退到系统字体 -
all: initial会清空继承链，慎用；它会让var(--x)失效，除非你在该节点重新 set
哪些情况会悄悄破坏样式隔离？
最隐蔽的破环点不在 JS 操作，而在 HTML 结构和 CSS 写法本身。
-
<slot></slot>插入的内容仍属于外部 DOM 树，它的样式完全受外部 CSS 控制——想约束它？只能靠slot[name]+:host ::slotted(*)做有限干预，且无法改变其display类型（如把<div> 强制变 <code>inline） - 使用
position: fixed或z-index时，影子内外元素共用同一层叠上下文，可能相互遮挡，这不是隔离失效，而是定位机制使然 - 通过
shadowRoot.querySelector()拿到节点再手动setAttribute('style', ...)，等于绕过样式封装逻辑，后续维护极易混乱 - 服务端渲染（SSR）时若未同步生成
shadowRoot，客户端 hydrate 阶段可能闪动或样式错乱——shadowRoot不是纯前端技巧，要端到端对齐
复杂点在于：隔离是分层的——DOM 结构隔离了，事件冒泡仍可跨边界（除非 composed: false），CSS 继承有选择地穿透，而 Web Components 的生命周期钩子又让 JS 执行时机变得微妙。别只盯着 attachShadow() 这一行代码。
