Shadow DOM中transition必须写在shadowRoot内部样式中才生效，因样式边界阻断外部声明匹配；写在:hover等伪类里会导致首次切换无动画，需置于基础状态；closed模式会使所有注入失效。
transition写在宿主元素上却对内部元素无效
Shadow DOM的样式边界会阻断外部transition声明对内部节点的匹配。即使你在宿主元素（比如my-button）上写了transition: opacity 0.2s，这个声明也不会自动继承或穿透到shadowRoot里的<button></button>上——浏览器根本不会把这条规则应用到shadow内部的任何元素。
真正生效的方式只有一种：把transition写进shadowRoot内部的样式里，也就是注入到shadowRoot.appendChild(style)那个<style>标签中。
- 别指望父级CSS能“漏进来”，哪怕用了
:host也只影响宿主自身，不作用于子元素 -
::slotted(*)可以控制投射进来的节点，但不能给它们加transition——它只转发样式，不转发过渡上下文 - 如果内部按钮要淡入淡出，就得在shadow内直接写：
button { opacity: 1; transition: opacity 0.2s; }
transition定义在伪类里导致首次切换无动画
常见错误是把transition写在:hover或:active规则里，比如：
button:hover { opacity: 0.7; transition: opacity 0.2s; }
这会导致第一次悬停时直接跳变，移开时也无动画——因为transition只在hover激活时存在，离开后就没了声明，浏览器失去插值依据。
立即学习“前端免费学习笔记（深入）”；
- 必须把
transition放在基础状态里：button { opacity: 1; transition: opacity 0.2s; } - 确保
Computed面板中transition-property始终显示为opacity，而不是仅在:hover下出现 - 动态类名（如
class="${state ? 'active' : ''}"）需确认对应CSS已通过safelist生成，否则JIT可能删掉整个规则
新插入的元素transition不触发
在shadowRoot里用JS动态创建并append一个带transition样式的元素，常常第一次变化没动画。这不是bug，而是浏览器没拿到“初始渲染快照”——元素插入时还没完成样式计算，transition起始值无法锚定。
- 解决方法：插入后强制一次重排，再改状态：
el.style.opacity = '0.5'; void el.offsetWidth; el.style.opacity = '1'; - 更稳妥的做法是先添加元素，等
requestAnimationFrame后再加状态类，或用customElement的firstUpdated钩子 - 避免在
connectedCallback里同步设置终态样式，应分两帧：第一帧挂载+设初始值，第二帧触发动画
mode: "closed"让所有transition注入都静默失败
如果定义shadowRoot时用了{ mode: 'closed' }，那shadowRoot.querySelector('style')会返回null，shadowRoot.appendChild(style)也不报错，只是彻底失效——你写的transition永远进不了shadow内部。
- 开发阶段务必用
{ mode: 'open' }，Chrome DevTools里能看到#shadow-root (open)才算成功 - 不要以为“上线才切closed”就能保安全——它只增加调试门槛，不防JS篡改，且直接废掉所有样式注入逻辑
- 检测方式必须是
'attachShadow' in Element.prototype，而不是查window.ShadowRoot（polyfill可能伪造后者）
