attachshadow()是唯一真正生效的样式隔离手段，不调用它，所有class命名、scoped css、bem规范都只是“心理安慰”；customelements.define()仅注册标签，不自动创建shadow dom，也不拦截全局css，自定义元素默认仍渲染在light dom中，样式链完全开放。
attachShadow() 是唯一真正生效的样式隔离手段，不调用它，所有 class 命名、scoped CSS、BEM 规范都只是“心理安慰”。
为什么 customElements.define() 本身不隔离样式
浏览器只把 customElements.define() 当作标签注册指令，不自动创建 Shadow DOM，也不拦截全局 CSS。常见后果包括：
-
button { color: red }全局规则直接穿透进你的<my-card></my-card>内部 - 两个子应用都定义了
.modal-overlay，后加载的覆盖前者的z-index - 父应用的
[data-theme="dark"] .btn意外改写了子应用按钮颜色 - 子应用引入的
normalize.css重置了整个页面的body字体大小
根本原因：自定义元素默认仍渲染在 light DOM 中，样式链完全开放。
attachShadow({ mode: 'open' }) 必须在 constructor() 中调用
这是唯一安全且有效的挂载时机。延迟到 connectedCallback() 或其他生命周期里调用，会因重复触发导致报错。
- 必须写成：
if (!this.shadowRoot) this.attachShadow({ mode: 'open' });，避免多次调用 - 不要用
mode: 'closed'：它不增强样式隔离，但会让el.shadowRoot返回null，DevTools 看不到结构，调试和测试全瘫痪 - CI/CD 应校验所有
attachShadow调用是否含{ mode: 'open' }，否则阻断构建
样式必须手动注入到 shadowRoot 内部
Shadow DOM 天然阻断外部样式链，<link rel="stylesheet"> 或 document.head 里的 <style></style> 完全无效。
- 正确做法：创建
<style></style>标签后appendChild到this.shadowRoot - 禁止把第三方 CSS（如 Bootstrap）的
<link>直接塞进shadowRoot.innerHTML—— 它会加载到全局，失去隔离 - 慎用全局选择器：
button { }会匹配所有 button；应限定为:host button { }或加 scope 类名 - 可控穿透只靠
:host和::slotted()：:host([disabled])可响应属性变化，::slotted(p)只能设color/font等继承性样式
命名与协作规范直接影响隔离效果
即使用了 Shadow DOM，若 class/id 泛化或事件未加标识，依然会引发跨组件干扰。
- 自定义元素名必须含破折号：
shop-product-card✅，shopProductCard❌（直接抛DOMException） - class 名必须绑定上下文：
user-profile__avatar✅，avatar❌（多团队共存时必撞车） -
data-属性要带业务前缀：data-shop-id✅，data-id❌（裸名等于没隔离） - 事件 dispatch 前应加组件标识：
new CustomEvent('shop-product-select', { detail })，避免监听冲突
Shadow DOM 解决的是样式和 DOM 边界问题，但 class、事件、数据流这些“软边界”仍需人工对齐，漏掉任一环，隔离就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
