<p>动态元素应优先用 data-* 属性或属性选择器定位，避免依赖不稳定的 class；事件代理配合 class 切换是主流方案；Shadow DOM 需用 :host 或 ::slotted；SSR 和渲染时序问题需用 requestAnimationFrame 等兜底。</p>
动态元素没类名？用属性选择器或 data-* 定位
JavaScript 动态插入的元素往往不带稳定 class，直接写 .btn-active 会失效。更可靠的方式是依赖其固有特征：比如 data-id、data-status，或内联 style 中的特定值（如 display: none）。浏览器对 [data-loading="true"] 这类属性选择器支持良好，且不依赖 JS 控制类名的时机。
- 避免靠 JS 频繁增删
class来驱动样式，改用data-属性做状态标记 -
[data-status="pending"]比.is-pending更易维护，CSS 和 JS 各自只改一处 - 慎用
[style*="display: none"]—— 内联样式优先级高，CSS 选择器无法覆盖，且字符串匹配不可靠
事件代理 + class 切换仍是主流方案
即使元素是动态添加的，document.addEventListener('click', ...) 或委托到父容器仍能捕获事件。关键在后续样式响应逻辑：不是靠选择器“自动匹配”，而是用 JS 主动切换 class，再由 CSS 响应。
document.querySelector('#list').addEventListener('click', e => {
if (e.target.matches('button[data-action="delete"]')) {
e.target.closest('li').classList.add('deleted');
}
});- CSS 写
li.deleted { opacity: 0.4; }，比尝试用复杂选择器“预测”动态结构更稳 - 避免在事件回调里直接操作
e.target.style，破坏 CSS 可维护性 - 如果需多状态（如 loading / success / error），统一用
data-state+ 单个 class 控制，而非堆砌多个 class
伪类和 :has() 能力有限，别强求纯 CSS 解决交互
:hover、:focus-within 可用于简单反馈，但像“点击后高亮兄弟节点”这类需求，:has() 浏览器兼容性仍差（Safari 15.4+、Chrome 105+），且无法响应 JS 触发的状态变更。
-
:has(+ .detail)看似优雅，但一旦父元素是 JS 动态渲染的，就可能因渲染时序导致匹配失败 -
:checked仅适用于原生表单控件，对 JS 模拟的开关无效 - 需要 JS 参与的状态变化，CSS 就该坦然接受“被通知”——用 class 或 data 属性作为桥梁
Web Components 或 Shadow DOM 下选择器要加 :host
若动态元素封装在自定义组件内（如 <my-card>），外部 CSS 默认无法穿透 Shadow DOM。此时不能写 my-card .title，而要用 :host 或 ::slotted。
立即学习“前端免费学习笔记（深入）”；
:host([data-loading="true"]) .content {
visibility: hidden;
}- 外部样式表无法影响 Shadow DOM 内部，除非组件显式暴露
:host接口 -
slot内容可用::slotted(*)修饰，但无法基于 slot 内部结构深度选择 - 服务端渲染（SSR）中动态元素可能早于 JS 执行就已存在，此时 CSS 选择器能立即生效，但 JS 初始化逻辑仍需检查是否已挂载
真实项目里最常被忽略的，是动态元素插入时的 CSS 渲染时序问题：JS 插入节点后，浏览器未必立刻完成样式计算，getComputedStyle 可能取到旧值；而 CSS 动画的 transition 若依赖刚插入的 class，也可能因重排未触发而跳过。这类边界情况，得靠 requestAnimationFrame 或 offsetHeight 强制触发重排来兜底。
