[csswg-drafts] [web-animations-1] Enable using Web Animations API with nested pseudo elements (#7469)

khushalsagar has just created a new issue for https://github.com/w3c/csswg-drafts:

== [web-animations-1] Enable using Web Animations API with nested pseudo elements ==
The WA-API allows targeting pseudo elements originating from a DOM element using `pseudoElement` in `KeyframeEffectOptions`. See the following description in the spec [here](https://drafts.csswg.org/web-animations-1/#dictdef-keyframeeffectoptions:~:text=The%20pseudo%2Delement%20selector%20(which%20must%20be%20valid%20or%20null)%20used%20to%20specify%20the%20effect%20target%20given%20the%20target%20element.):

"pseudoElement, of type [CSSOMString](https://drafts.csswg.org/cssom-1/#cssomstring), nullable, defaulting to null
The [pseudo-element](https://drafts.csswg.org/selectors-4/#pseudo-element) selector (which must be valid or null) used to specify the [effect target](https://drafts.csswg.org/web-animations-1/#effect-target) given the [target element](https://drafts.csswg.org/web-animations-1/#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.
```
element.animate(keyframes, {
      ...animationOptions,
      pseudoElement: "::before::marker",
});
```

Or with the new selectors introduced in #7346, the above could be this instead.
```
element.animate(keyframes, {
      ...animationOptions,
      pseudoElement: "::>>marker",
});
```

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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7469 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 7 July 2022 16:09:39 UTC