:defined伪类仅在自定义元素完成customelements.define()注册并升级后生效，不依赖脚本加载完成或dom渲染完毕；它需满足标签含短横线、已注册、css在body内加载三前提，常用于控制样式加载与避免fouc。
:defined 伪类必须配合 customElements.define() 才生效
浏览器只在自定义元素被成功注册并升级后才触发 :defined，它不是“只要写了标签就管用”的通用开关。如果 customElements.define('my-button', MyButton) 没执行，或者执行时机晚于样式加载（比如 JS 在 DOMContentLoaded 后才注册），my-button:defined 就永远不匹配。
常见错误现象：
- 页面首次加载时看到无样式占位符，刷新后才正常 —— 很可能是 JS 注册逻辑被 defer 或放在了 body 底部，而 CSS 已提前解析
-
my-button:not(:defined)样式生效，但my-button:defined始终无效 —— 检查控制台是否有Failed to define 'my-button': the element name is not valid错误
实操建议：
- 确保注册语句在
<script></script>中同步执行，或至少在document.head插入样式表之前完成 - 对多个自定义元素，避免用单个
customElements.define()链式调用，改用循环 + try/catch，防止一个失败阻塞全部 - 开发阶段可加临时检测：
console.log(customElements.get('my-button'))，返回构造函数说明已注册成功
自定义伪类不能替代 Shadow DOM 的样式隔离
:defined 只控制「是否应用某组样式」，它本身不创建作用域。如果你把所有组件样式都写在全局 CSS 里，哪怕用了 my-card:defined，它的子元素仍可能被外部规则污染，比如 h2 { color: red; } 依然会穿透进来。
使用场景中要注意：
- 仅靠
:defined实现“渐进式样式加载”，适合轻量级组件（如纯展示型<my-badge></my-badge>） - 涉及复杂布局、内嵌交互或需强样式封装的组件（如
<my-dialog></my-dialog>），必须搭配Shadow DOM，否则 :defined 只是治标 -
:defined无法阻止父级样式通过继承影响内部文字颜色、字体等 —— 这些仍需在组件内部重置或使用all: initial
大规模项目中 :defined 的性能与维护边界
当组件数量超过 50 个，且每个都依赖 :defined 控制样式加载时，CSS 选择器匹配开销会上升。浏览器要为每个未定义的自定义标签做一次状态检查，尤其在频繁动态插入/移除节点时（如列表虚拟滚动），可能引发 layout thrashing。
参数差异和取舍点：
- 用
my-button:not(:defined)显示骨架屏？—— 简单有效，但骨架结构必须和最终 DOM 完全一致，否则后续渲染会重排 - 用
data-define-pending替代:not(:defined)？—— 更可控，JS 可主动移除该属性，避免浏览器反复判断伪类状态 - 是否为每个组件单独写
my-input:defined规则？—— 不推荐。应聚合为[is^="my-"]:defined或统一 class 前缀（如.cmp:defined），减少选择器数量
兼容性与降级策略的实际约束
:defined 在 Safari 15.4+、Chrome 63+、Firefox 63+ 支持良好，但 IE 完全不支持，Edge Legacy 也无。这意味着任何依赖它的样式逻辑，必须有明确 fallback。
容易踩的坑：
- 写
my-progress:defined { display: block; }，却没给未定义时的my-progress { display: none; }—— 旧浏览器会直接显示空标签，破坏布局 - 用
:defined配合 CSS 变量做主题切换，但在不支持的环境里变量未声明，导致样式崩坏 - 认为
:defined能解决 Web Components 的 SSR 问题 —— 它只作用于客户端，服务端渲染时标签仍是未定义状态，需额外注入占位 HTML 或禁用相关样式
真正关键的不是“怎么用”，而是“在哪停”。一旦组件开始需要响应 props、处理事件、管理内部状态，:defined 就只是个启动信号，后面得靠 JS 控制生命周期，CSS 退回到辅助角色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
