Open khushalsagar opened 2 years ago
We probably need to ensure the selector matches a single pseudo-element since that's the current model: 1 animation per (pseudo-)element so I'm not sure about the latter syntax but the former seems fine. I think this can be added in Web Animations level 2.
The motivation for the latter syntax is similar to the motivation for #7346. It can be quite cumbersome to write the full pseudo element hierarchy in the selector, especially with the trees being created for #6464.
If a pattern to select the first matching pseudo element seems like a footgun, we could also require that the selector should match a single element and consider it invalid if it matches more than 1. @jakearchibald any concerns with this idea?
Related, do we need to make any changes so that getComputedStyle(..., "::before::marker")
works too?
Yes, getComputedStyle would need a similar change. Thanks for pointing that out.
If a pattern to select the first matching pseudo element seems like a footgun, we could also require that the selector should match a single element and consider it invalid if it matches more than 1. @jakearchibald any concerns with this idea?
I think we can say it acts like querySelector
, where it matches the first element even if there are many matches.
This is basically #4487
The CSS Working Group just discussed [web-animations-2] Enable using Web Animations API with nested pseudo elements
, and agreed to the following:
RESOLVED: The pseudoElement argument to animate() takes any pseudo-element selector, and selects the first matching pseudo-element like querySelector()
The WA-API allows targeting pseudo elements originating from a DOM element using
pseudoElement
inKeyframeEffectOptions
. See the following description in the spec here:"pseudoElement, of type CSSOMString, nullable, defaulting to null The pseudo-element selector (which must be valid or null) used to specify the effect target given the target element."
This is currently limited to pseudo elements which are direct descendants of the target element. The proposal is to allow using any pseudo element selector to target nested pseudo elements originating from the target element. For example,
The following could be use to target a marker nested inside the before pseudo element.
Or with the new selectors introduced in #7346, the above could be this instead.
Since the selector above could match multiple elements, the effect target would resolve to the first element matching the selector (similar to 'document.querySelector').
The above use-case will be common with shared element transitions which generates a tree of pseudo elements to animate.