W3C home > Mailing lists > Public > public-css-archive@w3.org > October 2019

Re: [csswg-drafts] [web-animations-1] Dependency on CSSPseudoElement (#4301)

From: Stephen McGruer via GitHub <sysbot+gh@w3.org>
Date: Tue, 08 Oct 2019 21:55:49 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-539720690-1570571748-sysbot+gh@w3.org>
We discussed this issue today at the cross-browser Animations sync. Motivated by #4398 , we agreed that for compatibility with what we _expect_ events will evolve to for `CSSPseudoElement`, we are going to drop web-animations-1's dependency on `CSSPseudoElement` and instead modify `KeyframeEffect` to have both a `target` and a `pseudoElement` selector string. To animate a pseudo-element, the web author would do something like:

`element.animate(keyframes, { duration: 1000, pseudoElement: '::before' });`

This is a significant change, and does have an impact on both web developers mental model of animations as well as arguably the ergonomics of the API. For example a given `animation` would not necessarily target its `animation.effect.target` - one must consider the `animation.effect.pseudoElement` selector too. Note that it is not (afaik) currently possible in any browser to obtain a JS handle to an animation on a pseudo-element, so we shouldn't be regressing on anything there.

Given the significance of the chance, adding this to CSSWG agenda to make sure it is visible and that the justification based on expected EventTarget changes (see below) are reasonable.

**Event Target Justification**

There are (many) existing events today that can be aimed at pseudo elements; 'click' being an obvious case. It is our understanding that currently such events have a `target` of the parent `Element`, rather than the (non-existent) `CSSPseudoElement` object.

In a world where `CSSPseudoElement` ships, it seems too breaking to have events (e.g. click) that target pseudo elements now return the `CSSPseudoElement` object for their `target`. Instead, we assume that they would follow the same style as [css-transitions-1](https://drafts.csswg.org/css-transitions-1/#interface-transitionevent-idl) or [css-animations-1](https://drafts.csswg.org/css-animations-1/#interface-animationevent-idl) events and add a `pseudoElement` selector to the event IDL  (or we could just continue to rely on [lovely hacks such as these?](https://stackoverflow.com/questions/7478336/only-detect-click-event-on-pseudo-element) :D).

-- 
GitHub Notification of comment by stephenmcgruer
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4301#issuecomment-539720690 using your GitHub account
Received on Tuesday, 8 October 2019 21:55:51 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:54 UTC