Bug 308330 – @scope'd styles don't affect <slot>'d elements, but they should

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

When a CSS style is defined inside a `@scope`, that style has no effect on DOM elements that are passed into the <slot> of a native Custom Element (Web Component).

This issue is happening in Safari >= 26.2. It does not happen in Safari 26.1 or 18.x, nor does it happen in Chrome or Firefox.

I have created a minimal reproduction in the following CodePen:
https://codepen.io/JoelWess/pen/zxBgpBN

Both <h1> should be purple in the following example, but the first <h1> is green in Safari 26.2:

```html
<div class="test-scope">
  <x-card>
    <h1 slot="heading">Slotted H1</h1>
    <p>Card content</p>
  </x-card>

  <h1>Unslotted H1</h1>
</div>
```

```css
/* Baseline: should work in every browser even when the <h1> is slotted */
h1 {
  color: green;
}

/* The bug: this should ALSO match, because <h1> is in the light DOM and is a child of .test-scope */
@scope (.test-scope) {
  h1 {
    color: purple;
  }
}
```

[Radar WebKit Bug Importer]

<rdar://problem/171383788>

[Nipun Shukla]

Pull request: https://github.com/WebKit/WebKit/pull/62502

[EWS]

Committed 311333@main (00497eb486c0): <https://commits.webkit.org/311333@main>

Reviewed commits have been landed. Closing PR #62502 and removing active labels.

[Nipun Shukla]

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/59298

[Antti Koivisto]

*** Bug 307982 has been marked as a duplicate of this bug. ***

[Onur Gumus]

*** Bug 307238 has been marked as a duplicate of this bug. ***