用data-属性+ :is() 控制组件状态可避免class泛化，通过语义化data-status实现作用域隔离，并配合CSS变量动态映射视觉表现，但需规避高频更新导致的性能问题。
用 data- 属性 + :is() 组合声明组件状态
纯靠 class 控制状态容易泛化，比如 .loading 在多个组件里共用，一改全乱。用 data-status 这类自定义属性绑定具体上下文，CSS 选择器天然带作用域隔离。
常见错误是把状态写成 class：class="button loading error"，结果样式互相干扰；正确做法是让 DOM 自身携带语义化状态：
-
<button data-status="idle">、<button data-status="loading">、<button data-status="success"> - 配合
:is()合并基础样式：button:is([data-status="idle"], [data-status="loading"], [data-status="success"]) { opacity: 1; } - 再单独控制差异部分：
button[data-status="loading"] { cursor: wait; }
var(--state-color) 动态映射状态到视觉表现
当状态需要影响颜色、边框、过渡时，别硬写死值，用 CSS 变量做中间层。这样 JS 只需改一个属性，样式自动响应。
例如按钮在不同状态下用不同主色：
立即学习“前端免费学习笔记（深入）”；
- 在组件根元素上定义：
button { --state-color: var(--color-idle); } - JS 切换状态时只改 dataset：
btn.dataset.status = 'error'; - 对应 CSS：
button[data-status="error"] { --state-color: var(--color-error); } - 最终样式复用变量：
button { background-color: var(--state-color); }
注意：变量必须在目标元素或其祖先上定义好，否则 var(--state-color) 会回退到初始值或 fallback（如果写了）。
避免在高频切换场景滥用 data- 属性
每改一次 dataset 都触发重排重绘，频繁调用（如拖拽中实时更新 data-x）会导致卡顿。
适用边界很明确：
- ✅ 适合：加载中/成功/失败/禁用等离散、低频状态
- ❌ 不适合：滚动位置、鼠标坐标、动画进度等连续变化值
- ⚠️ 折中方案：对连续值做节流（throttle）或降频采样，再写入
data-
浏览器原生支持 [data-*] 选择器，无需 polyfill，但别把它当成 JS 状态代理的替代品——它只是 CSS 层的状态投影。
组件级作用域里定义和覆盖 --* 变量
全局 :root 里的变量太宽泛，一个按钮主题不该影响整个页面。把变量定义收束到组件容器内更安全。
比如封装一个 <status-indicator>：
- HTML：
<div class="status-indicator" data-status="warning">... - CSS：
.status-indicator { --status-bg: #fff; --status-text: #333; } - 再按状态覆盖：
.status-indicator[data-status="error"] { --status-bg: #fee; --status-text: #d00; } - 子元素直接用：
.status-indicator::before { background-color: var(--status-bg); color: var(--status-text); }
关键点在于：变量作用域由选择器决定，不是由 HTML 结构决定。只要子元素在该选择器匹配范围内，就能继承并使用这些 --* 变量。
