Dave Rupert • 6/19/2026

A workaround for hiding empty slots in Chromium

This article addresses a common challenge in web components: hiding empty named slots to prevent 'ghost gaps' in flex or grid layouts, particularly in Chromium. It explains why :host(:has([slot])) fails in Chromium due to Shadow DOM encapsulation, while working in Safari and Firefox. The author shares a pure CSS solution using @scope to conditionally hide empty slots, providing a practical workaround for developers building UI components with slots.

0 comments

#css #web components #shadow dom