在 Shadow DOM 中控制禁用状态样式应使用 :host([disabled])，而非不存在的 :host(:disabled)；需配合 opacity、cursor、pointer-events 及 aria-disabled 实现视觉与语义完整禁用，并确保样式写入 Shadow DOM 内部。
在 Shadow DOM 中控制禁用状态样式，核心是用 :host([disabled])，而不是 :host(:disabled) —— 后者根本不存在，浏览器会直接忽略。
用 :host([disabled]) 匹配宿主禁用状态
自定义元素（如 <my-button>）本身不支持原生 :disabled 伪类，因为它不是表单控件。正确做法是监听宿主元素是否带有 disabled 属性：
-
:host([disabled])是标准写法，匹配任意存在disabled属性的宿主（无论值为空、""还是"true"） - 不要写
:host(disabled)或:host([disabled="true"])—— 前者语法错误，后者漏掉<my-btn disabled>这类布尔属性写法 - JS 控制时，用
this.toggleAttribute('disabled', true)或this.setAttribute('disabled', '')，确保属性真实存在
样式要同时处理视觉和交互行为
仅改颜色或透明度不够，用户需要明确感知“不可用”：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 加
opacity: 0.4或filter: grayscale(50%)（避免 Safari 对opacity的渲染异常） - 必须设
cursor: not-allowed，否则鼠标指针仍是默认箭头 - 配合
pointer-events: none阻断鼠标事件（注意：它不替代语义，仍需保留disabled属性供无障碍使用） - 别依赖
opacity单独实现禁用 —— 它不影响键盘聚焦，屏幕阅读器仍会读作“可操作”，务必同步设置aria-disabled="true"
确保样式写在 Shadow DOM 内部
:host() 只在 Shadow DOM 的 <style> 中生效，外部 CSS 无效：
- 创建 shadowRoot 后，动态插入
<style>标签，内容包含:host([disabled]) { ... } - 不能写在全局
<style>或外链 CSS 文件里，浏览器会静默忽略 - 若组件用了
mode: "closed"，无法注入样式 —— 开发阶段请固定用"open"
兼容旧版 Safari 的降级方案
部分旧版 Safari 对 :host([disabled]) 支持不稳定，可双保险：
- JS 同时切换 class：
this.classList.toggle('disabled', disabled) - CSS 写成
:host(.disabled), :host([disabled])，两者都生效 - 避免混合使用
[disabled]和:disabled，它们作用对象不同（前者匹配任意元素，后者只认原生表单控件）
