Add .pseudoTarget property to selected event types by danielsakhapov · Pull Request #413 · w3c/uievents

danielsakhapov · 2026-01-27T14:59:20Z

As resolved in w3c/csswg-drafts#12163, add .pseudoTarget property to selected event types and describe the initialization process for it.

danielsakhapov · 2026-01-27T17:19:42Z

@garykac could you ptal?

sections/external-algorithms.txt

index.bs

sections/external-algorithms.txt

smaug---- · 2026-02-09T09:28:23Z

sections/external-algorithms.txt

+
+				<p class="note">
+				This {{CSSPseudoElement}} must be the same object instance that would be returned
+				by calling <code>.pseudo(type)</code> on the |pseudoElement|'s originating element


What is .pseudo(type) ?
I guess this.

Updated this part to include links

smaug---- · 2026-02-09T09:32:52Z

sections/external-algorithms.txt

+				</p>
+
+			1. Set |event|'s <code>pseudoTarget</code> attribute to |pseudoInstance|
+


Are there tests for this (and for pseudo(type))? In this event case there should be tests ensuring that event.pseudoTarget doesn't change even if the event.target is moved to a different place in DOM, or get different styling during event dispatch.

There is https://wpt.fyi/results/css/css-pseudo/events-on-pseudo-element.tentative.html, but I'll definetly going to add more tests, once I merge this spec edit.

Do you ask this to add those tests to the spec here?

just asking if there are tests for this proposed API change. Those need some reviewing too. But sounds like there will be, but there aren't yet.

smaug----

This doesn't seem to handle event dispatch in Shadow DOM. We don't want to leak pseudo element usage in shadow DOM to light DOM.

danielsakhapov · 2026-02-09T10:49:44Z

This doesn't seem to handle event dispatch in Shadow DOM. We don't want to leak pseudo element usage in shadow DOM to light DOM.

Not entirely sure how to phrase that, ptal!

smaug---- · 2026-02-09T12:33:25Z

sections/external-algorithms.txt

+
+			1. Let |ultimateOriginatingElement| be the |pseudoElement|'s [=ultimate originating element=].
+
+			1. If |ultimateOriginatingElement| is in a shadow tree (that is, its [=tree/root=] is a {{ShadowRoot}}) and |eventTarget| is not contained within the same shadow tree, then exit.


I would expect that "ultimateOriginatingElement" (maybe we can find some other name for that ;) ) would be compared to the currentTarget and then the getter of pseudoElement would either return the object or null. Something similar-ish to https://html.spec.whatwg.org/#dom-commandevent-source perhaps?

smaug---- · 2026-02-10T15:27:36Z

Just FYI, there is now a rather major refactoring happening to UI Events spec, so this one might need to wait until w3c/pointerevents#564 and related PRs are done. Those should happen real soon.

danielsakhapov · 2026-02-10T15:36:40Z

Just FYI, there is now a rather major refactoring happening to UI Events spec, so this one might need to wait until w3c/pointerevents#564 and related PRs are done. Those should happen real soon.

I see, thanks for the heads up!

Does this PR look good now btw?

smaug---- · 2026-02-11T15:46:42Z

sections/event-uievent.txt

+					1. If {{UIEvent/pseudoTarget}} internal slot is <code>null</code>, then return <code>null</code>.
+					1. Let |currentTarget| be {{Event/currentTarget}}.
+					1. If |currentTarget| is <code>null</code>, then return <code>null</code>.
+					1. Let |origin| be {{Event/target}} (which would be {{UIEvent/pseudoTarget}}'s [=ultimate originating element=]).


"ultimate originating element" sounds a bit, hmm, comical :)

true... but since there can be nested pseudo-elements, the originating element can be also pseudo-element, so ultimate originating element is Element... that's an established CSS term! :)

smaug---- · 2026-02-11T15:48:48Z

sections/event-uievent.txt

 				constructor(DOMString type, optional UIEventInit eventInitDict = {});
 				readonly attribute Window? view;
 				readonly attribute long detail;
+				readonly attribute CSSPseudoElement? pseudoTarget;


Hmm, actually, why are we adding pseudoTarget to UIEvent? Which all events this will be used with?

I'm just pondering if this could be in MouseEvent

I initially added it only to selected list of events, but David suggested to put it on UIEvent.
But your comment made me realize I didn't include a note saying that mouse boundary events are disabled for .pseudoTarget! Which I was sure I added... Coming with a fix now

Added a note, including pointer events to prepare for future MEGAMERGE

smaug---- · 2026-02-11T15:53:42Z

sections/external-algorithms.txt

+	<h3 id="pseudo-element-event-dispatch">Pseudo-Element Event Dispatch</h3>
+
+		When the target of a user interaction is a [=pseudo-element=], the
+		{{UIEvent/pseudoTarget}} attribute is set to identify the specific pseudo-element involved.


Is this stuff supposed to work with click events? If so, how? Click events are dispatched to the common ancestor, so the pseudo-element on which mouse/pointerup happens might have nothing to do with the target of the click.

Yeah, so the same way as for elements? If both ends of a click happen on a pseudo-element, it goes into .pseudoTarget, if no, then a common ancestor determines that "the target of a user interaction is not a [=pseudo-element=]" and .pseudoTarget is null?

As resolved in w3c/csswg-drafts#12163, add .pseudoTarget property to selected event types and describe the initialization process for it.

danielsakhapov · 2026-02-24T13:53:34Z

The blocking PR has been merged now it seems, ptal

sections/event-uievent.txt

danielsakhapov mentioned this pull request Jan 27, 2026

[css-pseudo] Describe .pseudoTarget property for CSSPseudoElement #12163 w3c/csswg-drafts#13351

Open

dbaron reviewed Feb 2, 2026

View reviewed changes

sections/external-algorithms.txt Outdated Show resolved Hide resolved

sections/external-algorithms.txt Outdated Show resolved Hide resolved

index.bs Outdated Show resolved Hide resolved

danielsakhapov requested a review from dbaron February 3, 2026 19:46

dbaron reviewed Feb 4, 2026

View reviewed changes

index.bs Outdated Show resolved Hide resolved

sections/external-algorithms.txt Outdated Show resolved Hide resolved

danielsakhapov requested a review from dbaron February 5, 2026 11:35

dbaron approved these changes Feb 5, 2026

View reviewed changes

dbaron approved these changes Feb 6, 2026

View reviewed changes

smaug---- reviewed Feb 9, 2026

View reviewed changes

smaug---- requested changes Feb 9, 2026

View reviewed changes

danielsakhapov requested a review from smaug---- February 9, 2026 10:49

smaug---- reviewed Feb 9, 2026

View reviewed changes

danielsakhapov requested a review from smaug---- February 9, 2026 14:01

smaug---- reviewed Feb 11, 2026

View reviewed changes

danielsakhapov and others added 8 commits February 24, 2026 14:43

Add .pseudoTarget property to selected event types

fabaef3

As resolved in w3c/csswg-drafts#12163, add .pseudoTarget property to selected event types and describe the initialization process for it.

Fix missed property in MouseEvent

d78b7e1

Address the comments, move to UIEvent, update hit test

742421b

Removed dfn links, updated algo text for nested pseudos

60583e5

Fix dfn abmiguity

1deb7a8

Add links to .pseudo(type)

76f9754

Handle Light and Shadow DOM mix

1ccd25b

Update Light and Shadow DOM mix

c4c7e79

danielsakhapov force-pushed the spec_edit_for_css_12163 branch from e0b6dac to c4c7e79 Compare February 24, 2026 13:44

Remove event-mouseevent.txt

4d205b0

danielsakhapov added 2 commits February 24, 2026 14:47

Remove extra algo

cf19d53

Fix hit testing algo ref

2e6c44b

danielsakhapov requested a review from smaug---- February 24, 2026 13:53

smaug---- reviewed Feb 24, 2026

View reviewed changes

sections/event-uievent.txt Outdated Show resolved Hide resolved

Introduce pseudoTargetOrigin internal slot

39ff57e

danielsakhapov requested a review from smaug---- February 26, 2026 13:41

Improve init logic

9ea8d4e

danielsakhapov mentioned this pull request Mar 5, 2026

[css-animations-1][css-transitions-1] Add .pseudoTarget to AnimationEvent and TransitionEvent w3c/csswg-drafts#13603

Open

smaug---- mentioned this pull request Mar 5, 2026

Change light dismiss to use click events whatwg/html#11536

Open

6 tasks

		</p>

		1. Set \|event\|'s <code>pseudoTarget</code> attribute to \|pseudoInstance\|


		1. Let \|ultimateOriginatingElement\| be the \|pseudoElement\|'s [=ultimate originating element=].

		1. If \|ultimateOriginatingElement\| is in a shadow tree (that is, its [=tree/root=] is a {{ShadowRoot}}) and \|eventTarget\| is not contained within the same shadow tree, then exit.

Conversation

danielsakhapov commented Jan 27, 2026

Uh oh!

danielsakhapov commented Jan 27, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

smaug---- Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

smaug---- left a comment

Choose a reason for hiding this comment

Uh oh!

danielsakhapov commented Feb 9, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

smaug---- commented Feb 10, 2026

Uh oh!

danielsakhapov commented Feb 10, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

danielsakhapov commented Feb 24, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

smaug---- Feb 9, 2026 •

edited

Loading