Bug 232402

Summary:	:empty selector matches elements with a shadow root
Product:	WebKit	Reporter:	Luke Warlow <lwarlow>
Component:	CSS	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED INVALID
Severity:	Normal	CC:	emilio
Priority:	P2
Version:	Safari 15
Hardware:	Unspecified
OS:	Unspecified

Description Luke Warlow 2021-10-27 14:04:23 PDT

Steps to reproduce:

Go to https://jsfiddle.net/hyjfkwqx/
You should see there is no output.

Actual results:

The :empty selector matches an element with an open shadow root that itself has child elements. So the parent div is not displayed.

Expected results:

I would expect the :empty selector to not match these elements. So I would expect to see a red square with a smaller blue square in it.

Comment 1 Luke Warlow 2021-10-27 14:05:04 PDT

Chrome Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1264139

Firefox Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1738113

Comment 2 Luke Warlow 2021-10-29 08:27:36 PDT

I made an issue in the CSSWG github just in case it's a spec "issue" rather than a browser one. https://github.com/w3c/csswg-drafts/issues/6771

Comment 3 Emilio Cobos Álvarez (:emilio) 2021-10-29 12:19:20 PDT

Let's reopen if the CSSWG decides to change behavior here but this is invalid as per spec.