A workaround for hiding empty slots in Chromium

Named slots are one of web components’ biggest superpowers ✨. Imagine a Button component with an optional icon; in Web Components we don’t need a separate Button and IconButton, a single Button component with <slot name="icon"> will do. Or a card component with a handful of predefined slots for image, title, description, price, metadata, etc. Not 100 different cards… one card. Slots are a wonderful way to declaratively compose UI, but one shadow styling challenge that has vexed my team over the years is how to contextually hide a <slot> when there’s no slotted content. The problem… ghost gaps The most idiomatic way to check if a particular slot is in-use is to use :host(:has([slot="foo"])). But… In a weird twist to how web component browser-compat bugs tend to go, :host(:has([slot])) works in Safari and Firefox today but doesn’t work in Chromium! Chromium not supporting :host(:has([slot])) means we can’t query an element’s Light DOM contents from the Shadow DOM. That interpretation of…