如何在web组件shadow-dom中设置根字体大小？

Question

我正在用Vue构建一个第三方web组件，它的大部分样式都严重依赖于Tailwindcss。

web组件的阴影dom封装了大部分样式和css，使得(大部分)样式不会从web组件所在的网页渗漏到阴影dom的内部，反之亦然。

然而，Tailwind使用基于rem的值来调整几乎所有的字体、填充、高度、宽度等。

我刚刚发现，一个明显的例外情况是，父页面的样式会渗入到卷影dom中，因为卷影dom会将主页样式表的html{ }部分中设置的基本字体大小继承到卷影dom中。

由于rem值来自父html{}块，这意味着如果主题页面在其页面的html {}块中设置了除16px以外的任何字体大小，那么我所有基于Tailwind的高度、字体、填充等最终都会任意调整大小。

在我返回并尝试将Tailwind从我的组件中完全剥离之前，有没有什么方法可以阻止shadow-dom从主页的html {}块继承font-size？对于一个web组件来说，提供几乎所有封装的样式，却被迫从页面继承根字体大小，这似乎非常荒谬。

我尝试过用!important覆盖font-size，也尝试将组件包装在另一个标记中，但似乎都不起作用。

Answer 1

CSM font相关属性是CSS属性继承列表(跨越阴影dom边界)的一部分，从用户体验的角度来看，这是有意义的，因为您希望它们在整个网站/应用程序中保持一致。您通常会对所有组件使用相同的字体，即使它隐藏了DOM。

其次，在html标记上设置除16px之外的任何字体大小并不是更改字体大小的唯一方法。作为浏览器设置的一部分，某些浏览器允许直接更改默认字体大小。因此，网站可能不会将font-size设置为任何值，但最终可能会为网站设置不同的默认大小，而Tailwind CSS的情况可能会变得混乱。因此，Tailwind使用rem作为合理的默认值，根据在html标签处设置的应用程序浏览器font-size的font-size来采用布局和单位。

如果您确实需要切换到基于绝对像素的大小，则可以编辑尾随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',
    }
  }
};

根据需要将rem单位更改为px。