[Feature Proposal] Track @keyframes support

[knowler]

Code of Conduct

• I agree to follow this project's code of conduct.

Contributor License Agreement

• I have signed the CLA.

Feature name

@keyframes

Why should we track this?

Animation is a common need and it’s not uncommon to want to style a shadow part or an element that’s slotted.

Shadow DOM behavior / expectation mismatches

Behaviour is inconsistent across browsers. Where you can use keyframes as an animation name depends on the context it’s defined in for some browsers. Here’s an example that enumerates a number of combinations of animations in the same context or between contexts: https://codepen.io/knowler/pen/qByVNOa

From my understanding of the spec @keyframes should now be tree-scoped names, so they should not leak out which means that Safari matches the expectation and Chrome Canary is getting closer. Firefox needs a little adjustments.

target element	animation context	@keyframes context	Safari	Firefox	Chrome	Chrome Canary	Expected?
slotted element	inner (::slotted())	inner	✅ Yes	✅ Yes	❌ No	✅ Yes	✅ Yes
slotted element	inner (::slotted())	outer	✅ Yes	✅ Yes	✅ Yes	❌ No	✅ Yes
slotted element	outer	outer	✅ Yes	✅ Yes	✅ Yes	✅ Yes	✅ Yes
slotted element	outer	inner	❌ No	✅ Yes	❌ No	❌ No	❌ No
shadow part	outer (::part())	outer	✅ Yes	✅ Yes	❌ No	✅ Yes	✅ Yes
shadow part	outer (::part())	inner	❌ No	✅ Yes	✅ Yes	❌ No	❌ No
shadow part	inner	outer	✅ Yes	✅ Yes	❌ No	❌ No	✅ Yes
shadow part	inner	inner	✅ Yes	✅ Yes	✅ Yes	✅ Yes	✅ Yes

Tested browsers:

• Safari Version 26.3 (21623.2.7.11.6)
• Chrome Version 147.0.7727.56
• Chrome Canary Version 149.0.7780.0
• Firefox 149.0

Relevant links

• WPT:
  • https://wpt.fyi/results/css/css-shadow/keyframes-001.html
  • https://wpt.fyi/results/css/css-shadow/keyframes-002.html
  • https://wpt.fyi/results/css/css-shadow/keyframes-003.html
  • https://wpt.fyi/results/css/css-shadow/keyframes-004.html
  • https://wpt.fyi/results/css/css-shadow/keyframes-005.html
• Spec: https://drafts.csswg.org/css-animations/ (more specifically: https://drafts.csswg.org/css-shadow-1/#shadow-names)
• CSSWG issue: [css-scoping] Scoping of functions, other name-defining at-rules and custom idents w3c/csswg-drafts#11798 (will find more related ones)
• Browser bug:
  • Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=2011318

[5t3ph]

Thanks @knowler! This looks like a great addition. Feel free to open a PR if you have availability, otherwise we'll try to do it soon! Let me know your preference.

Do you feel WPT adequately covers these issues?

[knowler]

I can do that!

I’ll check the WPTs. I thought they seemed pretty good, but I did notice some difference between them and my own demo (which does have some redundancy).

[5t3ph]

Resolved as published in #7 🎉