w3c / w3c/csswg-drafts

[web-animations-1] What if the effect target is a nested pseudo-element?

Open
#4,487 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

web-animations-1
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

From https://drafts.csswg.org/web-animations-1/#keyframe-effects,

In order for the effect target to have a well-defined lifecycle, it is represented as an Element known as the target element and a pseudo-element selector knows as the target pseudo-selector. If the effect target is an Element, the target element is that element and the target pseudo-selector is null. If the effect target is a pseudo-element, the target element is its originating element and the target pseudo-selector is as required to specify that particular pseudo-element.

This seems to assume that pseudo-elements are always originated by an element. But nested pseudo-elements are originated by another pseudo-element.

So what happens if the effect target is a nested pseudo-element like ::before::marker?

I see 3 reasonable possibilities:

  • The target element is the originating element of the ::before, and the target pseudo-selector is ::before::marker.
    That is, enforce the target element to be an Element, never a CSSPseudoElement, and let the target pseudo-selector be multiple pseudo-element selectors.
  • The target element is the CSSPseudoElement represeinting the ::before, and the target pseudo-selector is ::marker
    That is, enforce the target pseudo-selector to be at most a single pseudo-element selector, and let the target element be either an Element or a CSSPseudoElement. Just forbid the case of the target element being a CSSPseudoElementand the target pseudo-selector being null.
  • Get rid of the target pseudo-selector, let the target element equal the effect target, either an Element or a CSSPseudoElement.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Web Animations Level 1 keyframe-effects section linked in the issue and review the existing discussion about nested pseudo-elements such as ::before::marker. Determine which target-element and target-pseudo-selector model the specification should define, then update the relevant wording once the working group reaches a decision.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
documentation, web-dev
Issue type
Documentation
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.