Bug 287854 – Web Inspector does not show any styles associated with ::part() selector

• Status: NEW
• Component: Web Inspector

[Kari Söderholm]

Created attachment 474266 [details]
Screenshot of Web Inspector missing the relevant styles

When you have styles using the ::part() selector (to target CSS shadow parts) it is impossible to debug these in Safari/WebKit because they don't show up at all in the Web Inspector even though the styles are rendered correctly in the viewport. In comparison both Firefox and Chrome/Chromium show these styles in their dev tools just like styles using more traditional selectors.

Steps to Reproduce:

You can use the MDN playground example for ::part() selector usage to reproduce the issue.

1) Click the Play button on the example on this page: https://developer.mozilla.org/en-US/docs/Web/CSS/::part

2) Click the Run button on the playground page that opened and wait a few seconds for the tabs to render on the top of the white rendering area on the right side.

3) Inspect one of the tabs so that you select the `<div part="tab">` element under `<tabbed-custom-element>` Shadow Content.

4) See that the list of styles for the element does not show any of the styles using the `::part()` selector like `tabbed-custom-element::part(tab) { ... }`

Expected Results:

All relevant styles should be shown including the styles using `::part()` selector.

Build Date & Hardware:
Issue encountered at least on Safari 18.3 (20620.2.4.11.5) and also on Safari Technology Preview Release 213 (Safari 18.2, WebKit 20621.1.11.111.1) running on macOS Sequoia 15.3.1 (24D70) on an M1 MacBook Pro.

[Radar WebKit Bug Importer]

<rdar://problem/145066279>

[Kari Söderholm]

Created attachment 474341 [details]
Minimal reproduction of the bug in HTML

Here's a minimal reproduction of the bug in HTML.

[Kari Söderholm]

Created attachment 474342 [details]
Screenshot of Safari Web Inspector showing the issue with the minimal reproduction example