:defined 是唯一可靠防 Web Components 首屏 FOUC 的伪类，但必须与 my-button:not(:defined) 占位规则配合使用，且组件名合规、注册成功、CSS 加载时机正确。
:defined 是唯一能可靠防 Web Components 首屏 FOUC 的 CSS 伪类，前提是它被正确写在占位规则之后、且组件名合规、注册成功。
为什么只写 my-button:defined 会失效
单独用 :defined 只控制“样式何时生效”，不解决“未定义时怎么占位”。浏览器遇到未注册的 <my-button></my-button> 时，按未知标签默认渲染（display: inline），导致布局塌陷、文字挤成一行、后续元素上移——这不是闪烁，是错位。
-
my-button:defined必须搭配my-button:not(:defined)使用，后者负责兜底 -
my-button:not(:defined)要写在 CSS 文件中更靠前的位置，否则会被:defined规则覆盖（权重相同，后声明者胜） - 占位样式必须保留空间：用
display: block+min-height，别用visibility: hidden或opacity: 0，它们不占流式布局空间
:not(:defined) 占位样式的实操要点
占位不是“隐藏”，而是给未升级元素一个合理视觉预期。错误做法是留白或设透明，正确做法是模拟组件大致尺寸和灰阶。
- 必须设
display（推荐block或inline-flex），避免 inline 默认行为干扰布局 - 加
min-height和min-width，值参考组件设计稿的最小尺寸 - 背景用浅灰（如
#f0f0f0）+ 简单边框（border: 1px dashed #ccc），暗示“这里有个组件正在加载” - 禁用指针事件：
pointer-events: none，防止用户误点未激活的占位块
哪些情况会让 :defined 完全不匹配
它不是 JS 标记的替代品，而是绑定 Custom Elements 生命周期的原生信号。三个硬性条件缺一不可：
立即学习“前端免费学习笔记（深入）”；
- 自定义元素名必须含短横线：
my-button✅，MyButton❌，button❌ -
customElements.define('my-button', MyButton)必须执行成功，控制台不能有Failed to define 'my-button'报错 - CSS 文件需在
customElements.define()执行之后加载，或至少放在内；若 CSS 在且 JSdefer，Safari 下大概率错过 - 禁用
is=""语法：<div is="my-button"> 在 Safari 中不触发 <code>:defined，必须改用<my-button></my-button>:defined不解决但常被混淆的问题它只管“样式应用时机”，不处理样式作用域或穿透逻辑：
- 无法让外部 CSS 影响 Shadow DOM 内部样式——那是
::slotted、:host和part的职责 - 不能替代
load事件监听或customElements.whenDefined()的 JS 逻辑，比如需要等组件就绪后再初始化内部状态 - 对 SSR 渲染无效：服务端没执行
define()，:not(:defined)会永远生效，需配合 hydrate 阶段清理
真正容易被忽略的是注册顺序和 CSS 加载时机的耦合——哪怕组件代码写得再规范，如果
<link rel="stylesheet">比customElements.define()早执行几十毫秒，:defined就形同虚设。建议把关键占位 CSS 内联进 HTML，注册脚本紧随其后，不依赖外部资源加载顺序。 - 无法让外部 CSS 影响 Shadow DOM 内部样式——那是
