如何在web组件的Shadow DOM中设置根字体大小？

Question

我正在Vue中构建第三方网络组件，该组件在大部分样式上主要依赖于Tailwindcss。

组件的shadow-dom封装了大部分样式和css，因此在组件所在的网页和shadow dom内部之间几乎没有样式泄漏。

但是，Tailwind几乎在所有字体、填充、高度、宽度等方面都使用基于rem的值进行大小调整。

我刚刚发现，唯一的例外是来自父页面的样式会流入到shadow-dom中，即shadow-dom会继承在主页面样式表中设置的html{ }部分的基础字体大小。

由于基于rem的值从父级的html{}块继承，这意味着如果主页面的html{}块中设置的字体大小不是16px，则所有基于Tailwind的高度、字体、填充等都会被任意调整大小。

在我回去尝试彻底删除组件中的Tailwind之前，是否有任何方法可以防止shadow-dom从主页面的html {}块中继承字体大小？一个提供了几乎所有封装样式的网络组件被迫从页面继承根字体大小似乎很荒谬。

我尝试过用!important覆盖字体大小，也尝试用另一个标签包装组件，但两者都似乎不起作用。

- Muhammad At-Tauhidi

Answer 1

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

其次，在 html 标记上将字体大小设置为除 16px 以外的任何值并不是改变字体大小的唯一方法。某些浏览器允许直接更改默认字体大小作为浏览器设置的一部分。因此，网站可能不会将 font-size 设置为任何值，但仍可能使用不同于默认大小的默认大小，而这可能导致 Tailwind CSS 出现问题。因此，Tailwind 使用 rem 作为合理的默认值，以根据浏览器的 font-size 或应用程序中 font-size 设置采用布局和单位。

如果您确实需要切换到基于绝对像素大小的尺寸，则可以像 Tailwind 在他们的网站上展示的那样编辑 Tailwind 配置。

// 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。

- Harshal Patil