Custom SVG slots for icons are not working as expected with tailwind

When using Media Chrome with tailwindcss on the page I noticed some unexpected behavior when using custom icons

Here’s a <media-play-button> that uses a slot="play" and a slot="pause"

<media-play-button>
  <svg slot="play" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
  <svg slot="pause" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
</media-play-button>

What I noticed is that both the play button and pause button were visible at the same time. Upon some digging I found that both the play and pause SVGs were getting display: block.

CSS in the light DOM (tailwind reset) has a rule where it sets svg { display: block; } – this isn’t tailwind specific, probably a lot of CSS reset code does this or something similar.

Because of specificity, the CSS from light DOM that set svg { display: block; } was over-riding the { display: none } set on the slots by the shadow DOM

What’s the best way to work-around this?

[dylanjha]

I think we’re pretty aligned on:

• externalizing icons with a custom element <media-icon> is ideal inspiration from Shoelace
• to solve this without re-doing how we do icons, !important is an acceptable least-bad option twitter thread with more discussion

[meyerweb]

I didn’t come up with anything new and fancy, but adding this to the web component’s CSS seems to work for me:

media-play-button[aria-label="pause"] svg[slot="play"],
media-play-button[aria-label="play"] svg[slot="pause"] {
   display: none;
}

The higher specificity of the rule overcomes Tailwind’s reset. Would you be able to ship this as part of your default styles, and trust users to not override or otherwise mess it up?

I also kinda disagree with TW’s application of block to those elements, and would happily just delete it, but if it’s an automated dependency I can see not wanting to mess around with its code.