我也遇到了同样的问题，但是我使用的是tailwind而不是bootstrap，所以我所要做的就是将生成的CSS值转换为px，而不是em或rem。
我把我的tailwind.config.js更新成这样-

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',
        },
  }

图片来源：https://github.com/tailwindlabs/tailwindcss/issues/1232#issuecomment-754804258
这里的一个问题是，如果不添加任何tailwind类，它就不会工作，例如
<div>Hello</div>无法工作
<div class="text-base">Hello</div>工程
为了处理这些案子我也用了

:host {
  all: initial;
}

在影子DOM中（如注解中所指出）。