Shadow DOM 中无法直接复用全局 @keyframes，需将其注入 Shadow Root 内部：可通过内联 <style> 片段或 CSSStyleSheet.insertRule + adoptedStyleSheets 动态注册，并采用组件前缀命名、生命周期管理以确保作用域隔离与可维护性。
Shadow DOM 中无法直接复用全局定义的 @keyframes，因为动画关键帧不属于 Shadow DOM 的样式作用域——它们是全局 CSS 实体，不会被 Shadow 树自动继承或封装。要在组件内安全、可维护地管理局部动画关键帧，核心思路是：把关键帧定义注入到 Shadow DOM 内部，或通过动态构造方式确保其作用于目标元素。
在 Shadow Root 中内联定义 @keyframes
最直接的方式是在组件 attach shadow 后，将关键帧规则作为 <style> 片段插入 Shadow Root。这样关键帧就“存在于”该 Shadow 树上下文中，可被内部元素引用：
- 使用
document.createElement('style')创建样式节点 - 将关键帧字符串（如
@keyframes slide-in { from { opacity: 0; } to { opacity: 1; } }）写入textContent - 调用
shadowRoot.appendChild(styleEl) - 后续在组件内部元素上用
animation: slide-in 0.3s ease-out即可生效
用 CSSOM 动态注册关键帧（推荐用于复用）
现代浏览器支持 CSS.registerProperty 和更关键的 CSS.animationWorklet，但真正适合局部关键帧的是 CSSStyleSheet.insertRule + shadowRoot.adoptedStyleSheets（需配合 constructable stylesheets）：
- 创建
new CSSStyleSheet() - 用
sheet.insertRule('@keyframes bounce {...}', 0)注入规则 - 将该 sheet 赋给
shadowRoot.adoptedStyleSheets = [sheet] - 这种方式便于在多个实例间共享同一份关键帧定义，且不污染全局样式表
避免命名冲突与作用域泄漏
即使关键帧定义在 Shadow 内，其名称仍是全局标识符。不同组件若定义同名 @keyframes fade，后注册的会覆盖前者：
- 建议为关键帧名添加组件前缀，如
@keyframes my-button-appear - 可在组件初始化时生成唯一哈希（如基于组件名 + 版本），用于关键帧命名
- 不要依赖全局已存在的关键帧名——哪怕看起来“只供自己用”，也应主动隔离
配合 Web Components 生命周期管理
关键帧应随组件生命周期创建和清理（尤其在频繁挂载/卸载场景）：
- 在
connectedCallback中注入关键帧样式（首次挂载时） - 用
static observedAttributes或MutationObserver监听状态变化，按需重置动画 - 在
disconnectedCallback中一般无需手动移除关键帧（CSS 规则无法被 JS 删除），但可清空相关 animation 属性防止残留效果
不复杂但容易忽略：关键帧不是“影子内容”，它必须显式出现在某个样式作用域中，才能被该作用域内的元素识别。把关键帧塞进 Shadow DOM，才是让动画真正“局部化”的起点。
