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.
3.9K Impressions