308330 JoelWess 2026-02-20 13:41:25 -0800 @scope'd styles don't affect <slot>'d elements, but they should 2026-05-12 10:41:47 -0700 1 1 1 Unclassified WebKit CSS Safari 26 All All RESOLVED FIXED InRadar P2 Major --- 1 joel.wesseling webkit-unassigned devhassan941 koivisto onur webkit-bug-importer oldest_to_newest 2183521 0 joel.wesseling 2026-02-20 13:41:25 -0800 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; } } ``` 2185654 1 webkit-bug-importer 2026-02-27 13:42:13 -0800 <rdar://problem/171383788> 2199014 2 nipun_shukla 2026-04-10 16:43:47 -0700 Pull request: https://github.com/WebKit/WebKit/pull/62502 2200872 3 ews-feeder 2026-04-15 17:08:45 -0700 Committed 311333@main (00497eb486c0): <https://commits.webkit.org/311333@main> Reviewed commits have been landed. Closing PR #62502 and removing active labels. 2201255 4 nipun_shukla 2026-04-16 15:46:53 -0700 Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/59298 2208609 5 koivisto 2026-05-07 09:14:32 -0700 *** Bug 307982 has been marked as a duplicate of this bug. *** 2210173 6 onur 2026-05-12 10:41:47 -0700 *** Bug 307238 has been marked as a duplicate of this bug. ***