:defined 是唯一由浏览器原生支持且与 Custom Elements 生命周期强绑定的伪类，用于解决未定义元素 FOUC 问题，必须搭配 Shadow DOM 实现样式隔离与大规模复用。
HTML 标签本身没有“自定义伪类”这个概念，浏览器不支持你随便写个 :my-hover 就生效；真正能用、该用、且在大规模组件复用中起关键作用的，是 :defined 伪类 —— 它专为 Custom Elements 设计，解决的是“样式提前应用导致 FOUC 或错位”的真实问题。
为什么不能自己造伪类，比如 :custom-state
浏览器 CSS 引擎只识别标准伪类（如 :hover、:focus、:disabled）和少数 Web Components 相关伪类（仅 :defined）。你写 my-button:custom-state 不会报错，但也不会匹配任何元素，CSS 规则直接被忽略。
常见错误现象：
- 开发者试图用伪类封装组件内部状态逻辑，结果样式完全不生效
- 误以为
:host或:slotted能在外部 CSS 中使用 —— 它们只能在 Shadow DOM 内部的<style>里用 - 把框架里的状态类名（如 Vue 的
v-if生成的 class）当成伪类去复用，导致跨框架失效
:defined 是什么，为什么它在组件复用中不可替代
:defined 是唯一一个由浏览器原生支持、且与 Custom Elements 生命周期强绑定的伪类。它表示该自定义元素已被 customElements.define() 成功注册并完成“升级”（upgraded）。
立即学习“前端免费学习笔记（深入）”；
使用场景：
- 防止未定义元素闪现无样式内容（FOUC）：给
my-card:not(:defined)设置骨架屏或最小占位样式 - 避免样式竞态：确保
my-card:defined的完整样式只在元素就绪后才加载或启用 - 配合构建工具做样式按需注入：例如只在检测到
:defined后才 import 对应组件的 CSS 模块
示例：
my-card:not(:defined) {
display: block;
min-height: 60px;
background: #f5f5f5;
border-radius: 4px;
}
my-card:defined {
/* 这里放完整样式，含动画、过渡、阴影等 */
transition: transform 0.2s;
}
大规模复用时，:defined 和 Shadow DOM 的协作要点
单独用 :defined 只解决“何时应用样式”，不解决“样式污染”。真正在大型项目里稳定复用，必须搭配 Shadow DOM 使用。
关键参数与兼容性影响：
-
attachShadow({ mode: 'open' })是推荐模式，方便调试；'closed'会屏蔽element.shadowRoot访问，增加测试难度 - Chrome 67+、Firefox 63+、Safari 13.1+、Edge 79+ 均支持，无需 polyfill（2026 年已可视为全覆盖）
- 若组件需 SSR 或静态 HTML 预渲染，
:defined在服务端不生效，需配合defer脚本或 hydration 逻辑兜底
容易踩的坑：
- 在 Shadow DOM 外部写
my-button:hover—— 它不会穿透进 shadow root，必须在 shadow 内部定义交互样式 - 把
:defined当作状态管理用，比如想靠它响应disabled属性变化 —— 它只反映“是否已定义”，不响应属性变更 - 多个同名自定义元素重复调用
customElements.define()，会抛出DOMException: "Failed to execute 'define' on 'CustomElementRegistry'"错误
真正的大规模复用难点不在语法，而在于组件边界意识：每个 customElements.define() 调用都是一次契约声明，:defined 是浏览器给你盖的“已履约”章，别指望它替你管状态、管通信、管生命周期外的任何事。
