custom elements 本身不提供样式隔离，attachshadow() 是唯一能真正启用隔离的手段；没调用它，所有“封装”都是假象。
Custom Elements 本身不提供样式隔离，attachShadow() 是唯一能真正启用隔离的手段；没调用它，所有“封装”都是假象。
为什么直接用 customElements.define() 无法隔离样式
浏览器原生的自定义元素只是注册了一个标签名和类的映射关系，DOM 插入后仍落在 light DOM 中——外部 CSS 规则（如 button { color: red }）会穿透进来，子应用的 .header 也可能覆盖父应用同名 class。常见错误现象包括：
- 子应用引入的
normalize.css重置了全局body字体大小 - 父应用设置
[data-theme="dark"] .btn，却意外影响子应用内未加前缀的按钮 - 两个子应用都定义
.modal-overlay，后者覆盖前者 z-index 导致遮罩失效
根本原因：Custom Element 不自动创建 Shadow DOM，也不做样式作用域划分。所谓“组件化”，此时只停留在命名层面。
attachShadow({ mode: 'closed' }) 是生产环境唯一推荐方式
必须在 constructor() 中显式调用 this.attachShadow({ mode: 'closed' })，否则样式边界不存在。使用 mode: 'open' 在生产环境等于主动放弃隔离能力：
-
mode: 'open'允许任意脚本通过el.shadowRoot修改内部样式表或 DOM 节点，破坏沙箱前提 - CI/CD 流水线应强制检查：所有
attachShadow调用必须含{ mode: 'closed' }，否则阻断构建 -
mode: 'closed'下el.shadowRoot返回null，但可通过console.dir(el)查看#shadow-root节点（DevTools 支持显示 closed shadow）
注意：closed 模式下无法用 JS 直接读写 shadow 内容，但这是安全代价——微前端场景中，子应用生命周期、资源加载、样式注入都应由宿主统一桥接，而非开放底层访问。
样式注入必须手动完成，且不能依赖外部 CSS 文件
Shadow DOM 天然阻断外部样式链，因此子应用的 CSS 必须显式注入到 shadowRoot 中。常见错误做法：
- 在 HTML 中写
<link rel="stylesheet" href="app.css">—— 这个<link>会被插入到 light DOM，样式无效 - 用
import('./app.css')动态加载，但没 append 到shadowRoot—— 加载成功，但无作用域 - 把整个子应用的 CSS 字符串拼进
shadowRoot.innerHTML = '<style>...</style>'—— 可行但不可维护，且易漏掉@import或字体声明
正确做法是：在 connectedCallback() 中动态创建 <style></style> 标签并 append 到 shadowRoot，或使用 CSSStyleSheet API 注入（兼容性需查 adoptedStyleSheets 支持）。
如何让子应用响应主题色等外部变量
Shadow DOM 隔离后，外部 CSS 变量默认进不去。不能靠继承，得靠显式透传：
- 在
shadowRoot的<style></style>中写:host { --primary-color: var(--primary-color, #007bff); } - 用
:host-context([data-theme="dark"]) { --text-color: #fff; }响应父级属性变化（注意兼容性） - 避免在
:host上写font-family或line-height等基础样式，除非你明确要切断继承 - 插槽内容（
<slot></slot>）默认受外部样式影响，需用::slotted(*) { all: initial; }或更精确的::slotted(h2) { margin: 0; }控制
最关键一点：attributeChangedCallback 不会触发初始值，首次渲染时的 theme="dark" 需在 connectedCallback() 中用 this.hasAttribute('theme') 手动读取并同步样式状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
