- Baseline:
- Widely
- Functional:
- Progressing
- Usage:
- Cross-Boundary
@keyframes defined outside of a shadow context are considered global and @keyframes defined within a shadow context are considered “tree-scoped”.
Ranked caution due to inconsistent behavior across browsers for cross-boundary usage. A consensus seems to have been reached for @keyframes defined within a shadow context to be tree-scoped, however, currently only Safari implements this correctly, Firefox leaks @keyframes defined within a tree outside, and Chrome has inconsistent support.
| Web Platform Test | Chrome 148 | Edge 148 | Firefox 150 | Safari 26.5 |
|---|---|---|---|---|
| @keyframes from the document should apply in the shadow tree | fail | fail | fail | pass |
| @keyframes should not leak out of the shadow tree. | pass | pass | fail | pass |
| @keyframes applies in the shadow tree | pass | pass | pass | pass |
| @keyframes applies to the shadow host | pass | pass | pass | pass |
| @keyframes in shadow tree applies to the slotted element | pass | pass | pass | pass |