How can you set the root font size within a web component shadow-dom?

Question

I am building a third party web component in Vue, which relies on Tailwindcss fairly heavily for most of its styles.

The shadow-dom of the web component encapsulates most of the styling and css so that there is (mostly) no bleed through of styles from the webpage where the web component sits to the interior of the shadow dom, and vice versa.

However, Tailwind uses rem based values for sizing almost all its fonts, padding, height, width, etc.

I just discovered that apparently the one exception where styles from the parent page bleed into the shadow-dom is that the shadow-dom will inherent the base font-size set in the html{ } section of the main page's stylesheet into the shadow-dom.

Since rem-based values inherit from the parent's html{} block, this means that all of my Tailwind-based heights, fonts, padding, etc wind up getting arbitrarily resized if the subject page has set a font-size in their page's html {} block that is set to anything other than 16px.

Before I go back and try to strip Tailwind completely out from my component, is there any way I can prevent the shadow-dom from inheriting the font-size from the html {} block of the main page? It seems pretty ridiculous for a web component to provide nearly all encapsulated styles, only to be forced to inherit the root font-size from the page.

I have tried overriding the font-size with !important, and also by trying to wrap the component in another tag, but neither seem to work.

Answer 1

CSM font related properties are part of inherited list of CSS properties (cross the shadow dom boundary) which makes sense from UX perspective as you want them to be consistent across the entire website/application. You would typically use same font for all the components even if it Shadow DOM.

Second, setting font-size anything other than 16px on html tag is not the only way to change the font-size. Some browsers allow to change default font size directly as part of the browser settings. So, the website may not set font-size to anything but may still end up with a different default size for the website and things can go haywire for Tailwind CSS. Thus, Tailwind uses rem as a sensible default to adopt to layouts and units as per the font-size of the browser of applications font-size set at html tag.

If you really need to switch to absolute pixel-based sizing, then you can edit the Tailwind configuration as show here on their website.

// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      px: '1px',
      0: '0',
      0.5: '0.125rem',
      1: '0.25rem',
      1.5: '0.375rem',
      2: '0.5rem',
      2.5: '0.625rem',
      3: '0.75rem',
      3.5: '0.875rem',
      4: '1rem',
      5: '1.25rem',
      6: '1.5rem',
      7: '1.75rem',
      8: '2rem',
      9: '2.25rem',
      10: '2.5rem',
      11: '2.75rem',
      12: '3rem',
      14: '3.5rem',
      16: '4rem',
      20: '5rem',
      24: '6rem',
      28: '7rem',
      32: '8rem',
      36: '9rem',
      40: '10rem',
      44: '11rem',
      48: '12rem',
      52: '13rem',
      56: '14rem',
      60: '15rem',
      64: '16rem',
      72: '18rem',
      80: '20rem',
      96: '24rem',
    }
  }
};

Change the rem units to px as you need.