customelements.define() 仅注册标签，不触发动画；须在 connectedcallback 或 attributechangedcallback 中手动切换 class 或修改样式来启动 css 动画，并通过强制重排等手段确保重播可靠。
customElements.define() 本身不触发任何动画，必须手动控制
注册自定义元素如 customElements.define('animated-card', AnimatedCard) 只让浏览器认识这个标签，不会自动播放 CSS 动画、也不会响应状态变化重播动画。常见错误是写好 @keyframes 和 animation: slide-in 0.3s，结果挂载后静止不动——因为动画只在 class 切换或属性变更时由 CSS 引擎触发，而组件没主动做这件事。
正确做法是在生命周期中显式切换 class 或修改内联 style：
- 在
connectedCallback()中调用this.classList.add('animate-in')触发初始动画 - 若需响应属性变化（如
data-state="expanded"），在attributeChangedCallback()里移除旧 class、添加新 class，例如this.classList.replace('collapsed', 'expanded') - 避免直接操作
style.animationName：易覆盖 timing-function 或打断正在播放的动画；统一走 class 控制更可靠
动画重播必须清空并重置，CSS animation 不会自动重复触发
点击按钮想让图标“抖一下”，但第二次点击没反应？这是因为 CSS 动画默认只在 class 首次添加时播放。即使你反复 classList.remove('shake') 再 add('shake')，浏览器可能跳过渲染帧，导致动画被忽略。
可靠方案是强制重流 + class 切换：
- 先
this.classList.remove('shake') - 立即执行
void this.offsetWidth（触发同步重排） - 再
this.classList.add('shake')
也可用 CSS 变量控制动画迭代：style.setProperty('--anim-count', Date.now())，配合 animation: shake var(--anim-count)，但兼容性略低。
复杂交互动画需绑定 JS 状态，不能只靠 :hover 或 :focus
触摸设备上 :hover 失效，且无法响应数据驱动的状态（如“加载中 → 成功 → 错误”）。纯 CSS 伪类做不到按 JS 逻辑切换多阶段动画。
应把状态映射为 class，并由 JS 主动管理：
- 定义语义化 class：
loading、success、error - 每个 class 对应独立
@keyframes和animation声明 - 在事件处理器中更新状态后，调用私有方法
this._updateAnimationState()，该方法负责清理旧 class、设置新 class 并触发重排 - 避免在
render()中每次 diff 都重设动画：动画应只在状态跃迁时触发，不是每帧都重播
Shadow DOM 中动画样式需显式透传或继承
在 shadowRoot 里写的 @keyframes slide-in 是局部作用域，外部 CSS 无法复用；反过来，外部定义的动画也进不了 Shadow DOM。更麻烦的是，CSS 变量（如 --duration）默认不穿透 Shadow 边界。
两种务实解法：
- 把关键动画定义写进
shadowRoot.innerHTML的<style></style>块里，确保作用域封闭 - 若需主题化控制时长/缓动，用
getComputedStyle(this).getPropertyValue('--duration')读取 light DOM 变量，在connectedCallback()中动态生成style标签注入到 shadowRoot - 慎用
inherit：动画属性（animation-duration等）不可继承，只能靠变量或 JS 注入
动画帧率敏感的操作（如拖拽跟随、滚动视差）别在 requestAnimationFrame 里反复查 getComputedStyle，缓存值或监听 attributeChangedCallback 更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
