:not(:defined) 可为已声明但未定义的自定义元素（如 <my-button>）添加临时样式，需满足命名含短横线、CSS 加载时机合理，并注意浏览器兼容性及降级方案。
怎么用 :not(:defined) 给未升级的自定义元素加临时样式
它只对继承自 HTMLElement 的自定义元素（即调用过 customElements.define() 的）有效，且仅在浏览器识别该标签名但尚未完成定义时匹配。比如你写了 <my-button></my-button>，但脚本还没执行到 customElements.define('my-button', ...)，这时元素存在 DOM 中，但状态是“已声明、未定义”，:not(:defined) 就能捕中。
- 必须搭配
display: block或其他显式布局属性，否则很多浏览器默认按display: inline渲染，导致样式错位 - 不能用于原生标签（如
<div>）或未声明的任意字符串标签（如<x-foo>从未被define()过，它根本不算“自定义元素”，:defined伪类不适用） - Firefox 从 115+ 支持，Chrome/Edge 从 90+ 支持，Safari 16.4+ 开始支持 —— 旧版 Safari 完全忽略该选择器，需降级处理
:not(:defined) 和 :host:not(:defined) 的区别在哪
前者是 CSS 选择器，在全局样式表里写，作用于 HTML 文档中的未定义元素；后者只能出现在 Web Component 的 shadow DOM 样式块（<style> 在 <template> 内）中，且仅当组件使用 shadowRoot 且未定义时才生效 —— 但注意：:host 本身要求宿主元素已存在并挂载，而未定义元素可能连构造函数都没绑定，所以 :host:not(:defined) 实际上几乎不会触发，属于误导性写法。
- 真正有效的只有文档级的
my-button:not(:defined) - 别在
<style>标签里写:host:not(:defined)试图兜底，它不会生效 - 如果想统一控制所有未定义组件，建议用通配类名 + JS 注入临时 class，再配 CSS，更可控
为什么加了 :not(:defined) 样式却没生效
最常见原因是元素还没被浏览器识别为“自定义元素”——比如标签名含大写字母但没满足自定义元素命名规则（必须含短横线），或者用了非法字符；也可能是 CSS 加载早于 HTML 解析，导致选择器注册时目标还不存在。
- 检查元素是否满足自定义元素命名规范：
<my-card>✅，<MyCard>❌，<card>❌ - 确保样式表在
<body>后引入，或用document.addEventListener('DOMContentLoaded', ...)延迟注入 - 用 DevTools 的 Elements 面板右键元素 → “Break on” → “attribute modifications”，观察
is属性或customElement状态变化 - 某些构建工具（如 Vite）会把 CSS 提取为独立文件，若异步加载，可能错过初始渲染时机
替代方案：JS 检测 + class 切换更稳吗
是的。CSS 伪类依赖浏览器实现一致性，而 customElements.get() 可靠得多。尤其在需要精确控制加载态、错误态或兼容老浏览器时，主动管理 class 更直接。
立即学习“前端免费学习笔记（深入）”；
- 在脚本开头遍历
document.querySelectorAll('*')，对每个疑似自定义元素调用customElements.get(tagName)，返回undefined就加is-undefined类 - 配合
MutationObserver监听新插入节点，避免漏掉动态添加的元素 - 注意性能：不要在高频操作（如滚动、输入）中反复查询，可节流或只监听
customElements.define后清理 class - 示例片段：
if (!customElements.get('my-input')) { element.classList.add('is-undefined'); }
真正麻烦的不是写对那行 CSS，而是得同时考虑定义时机、浏览器解析顺序、构建流程干预和降级 fallback —— 很多时候，一行 :not(:defined) 看似简洁，背后要补三处兼容逻辑。
