Bug 307982
| Summary: | REGRESSION (17.4-26): `@scope` with custom-element scope root stops applying to `:scope` and descendants | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | devhassan941 |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | CC: | ahmad.saleem792, karlcow, koivisto, webkit-bug-importer |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar |
| Version: | Safari 26 | ||
| Hardware: | All | ||
| OS: | All | ||
| URL: | https://jsfiddle.net/m7dbr8zw/ | ||
devhassan941
Summary
@scope with a custom-element root works in older Safari/WebKit, but fails in newer WebKit builds. Equivalent non-scoped selectors still work.
Minimal repro
Save as scope-custom-root-repro.html and open in browser.
<!doctype html>
<meta charset="utf-8">
<x-shell id="control-root"><span class="child">control child</span></x-shell>
<x-shell id="scoped-root"><span class="child">scoped child</span></x-shell>
<style>
x-shell { display:block; margin:8px 0; }
#control-root { color: rgb(0, 128, 0); }
#control-root .child { color: rgb(0, 128, 0); }
@scope (#scoped-root) {
:scope { color: rgb(255, 0, 0); }
.child { color: rgb(255, 0, 0); }
}
</style>
<script>
customElements.define('x-shell', class extends HTMLElement {
constructor() {
super();
const r = this.attachShadow({ mode: 'open' });
r.innerHTML = '<slot></slot>';
}
});
</script>
Steps to reproduce
1. Open file in Safari/WebKit
2. Check computed color of #scoped-root and #scoped-root .child
Expected behavior
- #scoped-root and .child are red
Actual behavior in newer WebKit
- #scoped-root and .child remain black (scoped block not applied)
Control
- #control-root rules apply correctly (green), showing regular selector path is fine
Interoperability / version notes
- Chromium: works
- WebKit 17.4 (Playwright WebKit build): works
- WebKit 26.0 (Playwright WebKit build): fails
- This suggests a regression in newer WebKit
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/170474720>
Ahmad Saleem
*** Safari Technology Preview 237 ***
scope child <- it is not red.
*** Chrome Canary 147 ***
scope child <- it is red.
*** Firefox Nightly 149 ***
scope child <- it is red.
Ahmad Saleem
WebKit ToT (312015@main) matches Chrome Canary 149.0.7809.0 (Official Build) canary (arm64) and have `scope child` as red. So it is fixed now on ToT but still broken on Safari Technology Preview 242.
Antti Koivisto
*** This bug has been marked as a duplicate of bug 308330 ***