防止第三方css污染需三道防线：首选shadow dom隔离作用域；不支持时用wrapper block加属性选择器兜底；js动态类名必须遵循bem规范，杜绝裸类名。
第三方CSS能直接改掉你的 button、h1、body，不是因为你写错了样式，而是它用全局选择器进了全局作用域——防止污染的关键不在“删它的类”，而在“锁住它的作用范围”。
用 Shadow DOM 隔离第三方组件容器
这是目前唯一能真正阻止第三方 CSS 泄露到宿主页面的原生方案。它不依赖构建工具、不改库源码、不拼前缀，靠浏览器子树隔离实现样式封印。
- 必须选一个干净容器：
<div id="widget-root"></div>，不能带任何 class 或内联样式 - 在渲染进程里挂载 shadowRoot：
element.attachShadow({ mode: 'open' })（open方便 DevTools 调试） - 把第三方
<link>和 HTML 全部 append 到shadowRoot，而不是document.head或document.body - 注意：Shadow DOM 内部默认不继承外部字体、变量等，需显式透传或重置：
:host { font-family: var(--app-font, sans-serif); }
用 wrapper block + 属性选择器兜底（无 Shadow DOM 时）
当目标环境不支持 Shadow DOM（如旧版 Electron），或第三方组件必须混排在普通 DOM 中，就得靠 CSS 作用域收缩+精准拦截双保险。
- HTML 中包裹第三方组件：
<div class="user-settings__date-picker"><datepicker></datepicker></div> - CSS 中所有规则必须前置该块：
.user-settings__date-picker .ant-picker-input input，禁止写成.user-settings__date-picker.ant-picker-input（这是两个独立类匹配） - 对动态插入的不可控类（如
hljs-js、tooltip--visible），用属性选择器兜底：.user-settings [class^="ant-"]，但绝不能省略容器前缀 - Webpack 构建下，若用了 CSS Modules，需加注释：
/* webpackMode: "global" */，否则属性选择器会被模块化隔离失效
JS 动态类名必须走 BEM 路径
第三方组件常通过 JS 插入节点或切换状态类（如 .el-select-dropdown、.active），裸名类一旦进全局，立刻污染整个页面。
- 禁止模板中自由绑定：
:class="{ 'active': isOpen }"→ 改为:class="bem('user-settings__dropdown', { 'user-settings__dropdown--open': isOpen })" - DOM 操作必须用完整 BEM：
el.classList.add('user-settings__dropdown--open')，不能只加'open' - 服务端渲染的静态 HTML 若含不可控类（如
hljs-js），在外层加语义块：<article class="article-content">...</article>，再用.article-content [class^="hljs-"]精确接管
最容易被忽略的是：BEM 隔离效果不取决于你写了多少 __ 和 --，而取决于有没有一处漏掉——比如某个 .search-form .input 还存在，整个沙箱就失效了。第三方样式不会主动守规矩，你得靠 Shadow DOM / wrapper block / JS 约束这三道防线把它框死在指定范围内。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
