[csswg-drafts] [cssom] Browsers disagree on `getComputedStyle()` values of some pseudo-elements (#14210)

cdoublev has just created a new issue for https://github.com/w3c/csswg-drafts:

== [cssom] Browsers disagree on `getComputedStyle()` values of some pseudo-elements ==
CSSOM requires returning the empty string for `::slotted()` and `::part()` (and unknown pseudo-elements).

  > 2. If `type` is failure, or is a `::slotted()` or `::part()` pseudo-element, let `obj` be null.

https://drafts.csswg.org/cssom-1/#dom-window-getcomputedstyle

<details>
<summary>(1) But Chrome returns the resolved styles of <code>::slotted()</code> and <code>::part()</code> but I assume this a bug?</summary>
<br>

```html
<style>
  ::part(part) { color: green }
</style>

<div id="host">
  <template shadowrootmode="open">
    <style>::slotted(div) { color: green }</style>
    <slot id="slot"></slot>
    <div id="part" part="part"></div>
  </template>
  <div id="slotted"></div>
</div>

<script>
  getComputedStyle(host.shadowRoot.getElementById('part'), '::part(part)').color // rgb(0, 128, 0) in Chrome but '' in Firefox
  getComputedStyle(slotted, '::slotted(div)').color // rgb(0, 128, 0) in Chrome but '' in Firefox
</script>
```

Note that I am not certain that I have fully grasped the definitions of `::part()` and `::slotted()`, given that `::part()` only matches anything when the originating element is a shadow host, and `::slotted()` only exists on slots. Consequently, the elements passed to `getComputedStyle()` should be `#host` and `#slot` in the example above, but this return the initial styles.

</details>

<details>
<summary>(2) But Firefox also returns the empty string for <code>::details-content</code>.</summary>
<br>

```html
<style>
  ::details-content { color: green }
</style>

<details id="details" style="color: green"></details>

<script>
  getComputedStyle(details, '::details-content').color; // rgb(0, 128, 0) in Chrome but '' in Firefox
</script>
```

</details>

Perhaps CSSOM wants to return the empty string for all element-backed pseudo-elements?

<details>
<summary>(3) But Chrome returns the initial styles for <code>::file-selector-button</code> and <code>::placeholder</code> if they are not rendered.</summary>
<br>

```html
<style>
  ::file-selector-button { color: green }
  ::placeholder { color: green }
</style>

<div id="div"></div>
<input id="file" type="file">
<input id="text" placeholder="">

<script>
  getComputedStyle(div, '::file-selector-button').color // rgb(0, 128, 0) in Firefox but '' in Chrome
  getComputedStyle(div, '::placeholder').color // rgb(0, 128, 0) in Firefox but '' in Chrome
  getComputedStyle(file, '::file-selector-button').color // rgb(0, 128, 0)
  getComputedStyle(text, '::placeholder').color; // rgb(0, 128, 0)
</script>
```

</details>

This may be related to #14127.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/14210 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 21 July 2026 09:13:06 UTC