How do you isolate your shadow DOM styles?

[igorlanko]

I'm running Svelte with TailwindCSS. Here's my content script setup:

@tailwind base;
@tailwind components;
@tailwind utilities;

:host,
:root,
shadow-el {
	all: initial !important;
	font-size: 16px !important;
}

import styles from './styles.css?inline'

const shadowHost = document.createElement('shadow-el')
const shadowRoot = shadowHost.attachShadow({ mode: 'open' })
document.body.appendChild(shadowHost)

const styleElement = document.createElement('style')
styleElement.textContent = styles
shadowRoot.appendChild(styleElement)

The trouble however is that some sites have this weird rem reset method where they set html { font-size: 62.5% }. Now because TailwindCSS uses rem, this obviously messes up all the styles applied in the overlay of my content script.

The issue visualized in a simple repro:

You can't tell, but the size of the overlay is scaled down (h-20 is 80px, while it's rendered at 50px, etc).

It's weird because even though the manually set font-size: 62.5% appears to be overwritten by both text-base and font-size: 16px !important; all: initial !important;, it's still scaling down the entire overlay, because Tailwind sees the base as 62.5%, not 100%. So clearly the reset is not working and the host styles are still bleeding in.

How do you do the reset to ensure things like these aren't conflicting?

Thanks