Change root font-size for ShadowRoot tree

Question

I am trying to build a chrome extension which injects an HTML popup on the host page via content script.

I am adding this popup using shadowRoot to avoid collisions with the main page. Also, I am using bootstrap on the popup for styling. One issue which is happening is that, bootstrap defines many of its component properties in rem units which are relative to the font-size of page root(html element) and not the shadow root. This messes up with popup's CSS as some pages have very small font-size defined on their root.

I wanted to understand if its possible to define a new root with font-size for the ShadowRoot or somehow override the root value being used in the popup via bootstrap!

Thanks a lot, really appreciate any help!

``font-size`` is an _inheritable_ style, thus styles content inside shadowDOM. Only way to overrule it is to add a style **inside** shadowDOM — Danny '365CSI' Engelman, Jan 30 '23 at 08:25
I added the style to the element which hosted the shadowDOM but the rem properties still refer to the font-size of the original root. Is there any other way you are suggesting to override this? — Nikhil Jindal, Jan 30 '23 at 14:59
``font-size`` is an _inheritable_ style, so inherits from previous definitions. https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/ — Danny '365CSI' Engelman, Jan 30 '23 at 15:10
Thanks Danny! I tried using the `:host { all:initial; } ` which seems to work in resetting the color but the font-size override is not working in ShadowDOM. https://jsfiddle.net/4ktv9ebu/ — Nikhil Jindal, Jan 30 '23 at 17:43

Varun Kumar · Answer 1 · 2023-03-15T19:16:09.140

I had the same exact problem but I was using tailwind instead of bootstrap. So all I had to do was convert the generated CSS values into px instead of em or rem.

I updated my tailwind.config.js like this-

theme: {
    fontSize: {
          xs: ['12px', { lineHeight: '16px' }],
          sm: ['14px', { lineHeight: '20px' }],
          base: ['16px', { lineHeight: '24px' }],
          lg: ['18px', { lineHeight: '28px' }],
          xl: ['20px', { lineHeight: '28px' }],
          '2xl': ['24px', { lineHeight: '32px' }],
          '3xl': ['30px', { lineHeight: '36px' }],
          '4xl': ['36px', { lineHeight: '40px' }],
          '5xl': ['48px', { lineHeight: '16px' }],
          '6xl': ['60px', { lineHeight: '16px' }],
          '7xl': ['72px', { lineHeight: '16px' }],
        },
        spacing: {
          px: '1px',
          0: '0',
          0.5: '2px',
          1: '4px',
          1.5: '6px',
          2: '8px',
          2.5: '10px',
          3: '12px',
          3.5: '14px',
          4: '16px',
          5: '20px',
          6: '24px',
          7: '28px',
          8: '32px',
          9: '36px',
          10: '40px',
          11: '44px',
          12: '48px',
          14: '56px',
          16: '64px',
          20: '80px',
          24: '96px',
          28: '112px',
          32: '128px',
          36: '144px',
          40: '160px',
          44: '176px',
          48: '192px',
          52: '208px',
          56: '224px',
          60: '240px',
          64: '256px',
          72: '288px',
          80: '320px',
          96: '384px',
        },
  }

Source: https://github.com/tailwindlabs/tailwindcss/issues/1232#issuecomment-754804258

One catch here is, it won't work if you don't add any tailwind class, e.g

<div>Hello</div> won't work

<div class="text-base">Hello</div> works

To handle these cases as well, I used

:host {
  all: initial;
}

in shadow DOM (as pointed out in comment).

Thanks Varun! I think this works for the tailwind but with bootstrap, there does not seem to be a way to override this. Please let me know if there is some workaround for bootstrap. — Nikhil Jindal, Jun 05 '23 at 03:57

Change root font-size for ShadowRoot tree

1 Answers1