:enabled伪类仅支持原生表单控件，对自定义组件无效；因其依赖原生disabled属性及DOM property，而自定义元素的disabled仅为普通HTML属性，无法触发状态匹配；应改用:defined配合data-enabled等自定义状态属性控制样式。
:enabled 伪类根本不支持自定义组件
:enabled 是专为原生表单控件设计的伪类，只识别 <input>、<button>、<select>、<textarea> 这类**原生支持 disabled 属性的 HTML 元素**。自定义按钮（比如 <my-button>、<app-button> 或用 <div role="button"> 模拟的）即使加了 disabled 属性或 disabled=""，浏览器也完全无视——:enabled 规则直接被跳过，连解析都不会走。
为什么 disabled 属性存在也不生效
自定义组件里的 disabled 只是普通 HTML 属性，不是语义化禁用逻辑。浏览器不会据此推导“可启用/不可启用”状态，更不会触发 :enabled 或 :disabled 匹配。
- 对比：
<button disabled>→ DOM propertyelement.disabled === true，且:disabled立即生效 - 而：
<my-button disabled>→ DOM property 无disabled，:disabled不匹配，:enabled也不匹配（因为压根不进表单控件判定流程） - 即使你在 JS 里手动设置
el.setAttribute('disabled', '')，它仍只是个字符串属性，无法激活原生状态机
替代方案：用 :defined + 自定义状态控制样式
对 Web Components，真正可控的时机是元素注册完成后的升级状态，这时应改用 :defined 配合显式状态管理：
- 给自定义按钮加一个真实的状态属性，比如
data-enabled="false" - 写 CSS：
my-button:not([data-enabled="true"]) { opacity: 0.5; pointer-events: none; } - 配合
my-button:defined确保样式只作用于已升级组件，避免 FOUC：my-button:not(:defined) { display: block; min-height: 36px; } - 在组件内部响应
data-enabled变化，用MutationObserver或attributeChangedCallback同步视觉与交互
框架场景下特别注意
Vue/React 中的“禁用按钮”往往靠 props 控制，但底层渲染出的 DOM 可能仍是 <div> 或未透出 disabled 到根节点：
立即学习“前端免费学习笔记（深入）”；
- Ant Design 的
<Button disabled>在某些版本中，根元素是<span>，:disabled完全无效 - Vuetify 的
v-btn默认渲染为<button>，但若你用了tag="div"，就退回自定义组件逻辑 - 检查开发者工具里最终输出的标签类型和属性，别只信组件名——
:enabled看的是 DOM，不是 JSX 或 template
:enabled 的行为，必须主动暴露语义化状态，并用属性选择器或 JS 协同控制。 
