CSS中使用:not(:defined)选择未定义元素的技巧

`:not(:defined)` 是一种精准应对自定义元素“已声明但未定义”状态的 CSS 机制，能在浏览器识别标签名（符合短横线命名规范） yet 脚本尚未执行 `customElements.define()` 的短暂窗口期，为未升级的组件添加临时样式（如强制 `display: block` 防止布局错乱），但它仅适用于继承自 `HTMLElement` 的合法自定义元素，不兼容原生标签或非法命名，并受限于浏览器支持（Firefox 115+、Chrome/Edge 90+、Safari 16.4+），旧版 Safari 完全忽略，需搭配 JS 检测、类名注入或 `MutationObserver` 等降级方案才能真正稳健落地——看似一行 CSS 的优雅写法，实则牵动定义时机、解析顺序、构建流程与多端兼容的系统性权衡。

怎么用 :not(:defined) 给未升级的自定义元素加临时样式

它只对继承自 HTMLElement 的自定义元素（即调用过 customElements.define() 的）有效，且仅在浏览器识别该标签名但尚未完成定义时匹配。比如你写了 ，但脚本还没执行到 customElements.define('my-button', ...)，这时元素存在 DOM 中，但状态是“已声明、未定义”，:not(:defined) 就能捕中。

• 必须搭配 display: block 或其他显式布局属性，否则很多浏览器默认按 display: inline 渲染，导致样式错位
• 不能用于原生标签（如
  ）或未声明的任意字符串标签（如 从未被 define() 过，它根本不算“自定义元素”，:defined 伪类不适用）
• Firefox 从 115+ 支持，Chrome/Edge 从 90+ 支持，Safari 16.4+ 开始支持 —— 旧版 Safari 完全忽略该选择器，需降级处理

:not(:defined) 和 :host:not(:defined) 的区别在哪

前者是 CSS 选择器，在全局样式表里写，作用于 HTML 文档中的未定义元素；后者只能出现在 Web Component 的 shadow DOM 样式块（