Chromium doesn't support `:host(:has([slot]))` for querying Light DOM from Shadow DOM, causing 'ghost gaps' in flex/grid layouts when optional named slots are empty. After years of failed workarounds, a pure CSS fix was discovered using `@scope`: wrapping the `:scope:has([slot])` selector inside a bare `@scope` rule allows it to match the shadow host instead of the shadow root, bypassing Chromium's encapsulation limitation. This works because the CSS Cascade 6 spec explicitly allows `@scope` without a scope-root in shadow styles to scope to the shadow host. The fix works across Chrome, Firefox, and Safari.

4m read timeFrom daverupert.com
Post cover image
Table of contents
The problem… ghost gapsThe failed attempts…The fix… use @scopeThe why…
3.9K Impressions