必须用Shadow DOM实现样式彻底隔离：调用attachShadow({mode:'open'})创建影子根，内联<style>注入其中，外部CSS无法穿透，内部样式不泄露；:host和::slotted是唯二合规跨边界钩子。
自定义元素里怎么让样式不跑出去
直接用 Shadow DOM。这是目前唯一能真正隔离样式的原生方案，不是“可选”，而是“必须”。customElements.define()注册完元素后，在 constructor 或 connectedCallback 里调用 this.attachShadow({ mode: 'open' })，再把 <style> 插进去，样式就天然被锁死在影子树内。
常见错误现象：只写 <my-button></my-button>，然后在全局 <style> 里写 my-button span { color: red; }——这会生效，但完全没隔离；所有页面里匹配的 span 都会被染红。
- Shadow DOM 内部的
<style>只影响该组件内部节点，外部 CSS 无法穿透（除非显式用::slotted或:host） - 不要试图在 Shadow DOM 外用类名选择器控制它内部元素——浏览器根本找不到，因为影子树是边界
-
mode: 'closed'会让 JS 无法访问影子根，调试困难，日常开发用'open'更实际
@scope 能不能给自定义元素加作用域
不能。@scope 和自定义元素没有绑定关系，它只认普通 HTML 元素上的 scope 或 scope-start 属性，而自定义元素默认不带这些属性，也不能靠 observedAttributes 自动注入。
即使你手动给自定义元素加 scope 属性：<my-card scope></my-card>，再写 @scope (my-card[scope]) { .title { color: blue; } }，Chrome 125+ 也大概率不生效——因为 @scope 当前实现要求“scope-root 必须是普通元素”，对自定义元素的支持尚无明确规范和稳定行为。
立即学习“前端免费学习笔记（深入）”；
- @scope 规则在解析时就丢弃无法匹配的 scope root，不会等元素升级完成后再重试
- 自定义元素从
<my-card>到真正成为MyCardElement实例有延迟，@scope 不感知这个生命周期 - 别指望用
:defined和 @scope 组合，两者机制完全不同，也不兼容
:defined 伪类到底管什么
:defined 是为自定义元素“防闪”用的，不是作用域工具。它只判断元素是否已被 customElements.define() 注册并完成升级，仅此而已。
典型用法是配合全局样式做降级处理：my-card:not(:defined) { display: inline-block; opacity: 0.7; } 显示加载态，my-card:defined { opacity: 1; } 等真正就绪后再显示完整样式。
-
:defined不影响选择器作用范围，它只是个状态开关 - 它对内置元素（如
<div>、<p>）永远返回 true，只对自定义标签有意义 - 别写
my-card:defined .title想“限定作用域”——这只是普通后代选择器，照样可能匹配到其他地方的.title
为什么 BEM 或 CSS Modules 比折腾作用域更实际
因为它们不依赖浏览器新特性，也不需要协调 HTML attribute 和 CSS 选择器的硬绑定。BEM 靠命名约定，CSS Modules 靠构建时哈希，都是“写完就跑”，没有静默失效风险。
比如你写一个 <my-card>，内部用 my-card__title 类名，全局样式表里写 .my-card__title { font-size: 1.2em; }，只要类名不冲突，效果就确定；换成 CSS Modules，import styles from './MyCard.module.css' 后用 styles.title，类名自动变成唯一字符串，连手误都不会撞。
- BEM 适合无构建流程的老项目或静态页，但得靠团队自觉守规
- CSS Modules 需要构建工具支持（Vite/Webpack），但零配置即生效，JS 和 CSS 一一对应
- Shadow DOM + CSS Modules 混用也可以，但多数时候单用 Shadow DOM 就够了
真正容易被忽略的是：作用域不是“写了就能用”的功能，而是“设计约束”——要么用 Shadow DOM 彻底隔离，要么用命名/构建手段规避冲突，没有中间态。@scope 目前连中间态都算不上，它只是个待验证的语法提案。
