Shadow DOM 如何在组件中管理局部动画关键帧

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 树上下文中，可被内部元素引用：

1. 使用 document.createElement('style') 创建样式节点
2. 将关键帧字符串（如 @keyframes slide-in { from { opacity: 0; } to { opacity: 1; } }）写入 textContent
3. 调用 shadowRoot.appendChild(styleEl)
4. 后续在组件内部元素上用 animation: slide-in 0.3s ease-out 即可生效

用 CSSOM 动态注册关键帧（推荐用于复用）

现代浏览器支持 CSS.registerProperty 和更关键的 CSS.animationWorklet，但真正适合局部关键帧的是 CSSStyleSheet.insertRule + shadowRoot.adoptedStyleSheets（需配合 constructable stylesheets）：

1. 创建 new CSSStyleSheet()
2. 用 sheet.insertRule('@keyframes bounce {...}', 0) 注入规则
3. 将该 sheet 赋给 shadowRoot.adoptedStyleSheets = [sheet]
4. 这种方式便于在多个实例间共享同一份关键帧定义，且不污染全局样式表

避免命名冲突与作用域泄漏

即使关键帧定义在 Shadow 内，其名称仍是全局标识符。不同组件若定义同名 @keyframes fade，后注册的会覆盖前者：

1. 建议为关键帧名添加组件前缀，如 @keyframes my-button-appear
2. 可在组件初始化时生成唯一哈希（如基于组件名 + 版本），用于关键帧命名
3. 不要依赖全局已存在的关键帧名——哪怕看起来“只供自己用”，也应主动隔离

配合 Web Components 生命周期管理

关键帧应随组件生命周期创建和清理（尤其在频繁挂载/卸载场景）：

1. 在 connectedCallback 中注入关键帧样式（首次挂载时）
2. 用 static observedAttributes 或 MutationObserver 监听状态变化，按需重置动画
3. 在 disconnectedCallback 中一般无需手动移除关键帧（CSS 规则无法被 JS 删除），但可清空相关 animation 属性防止残留效果

不复杂但容易忽略：关键帧不是“影子内容”，它必须显式出现在某个样式作用域中，才能被该作用域内的元素识别。把关键帧塞进 Shadow DOM，才是让动画真正“局部化”的起点。