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

Question

我正在 Vue 中构建第三方 Web 组件，它的大部分样式都相当依赖 Tailwindcss。

Web 组件的 Shadow-dom 封装了大部分样式和 CSS，因此（大部分）不会有样式从 Web 组件所在的网页渗透到 Shadow dom 的内部，反之亦然。

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

我刚刚发现，显然，父页面的样式渗入到 Shadow-dom 中的一个例外是，shadow-dom 会将主页样式表的 html{ } 部分中设置的基本字体大小固有到 Shadow-dom 中。

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

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

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

Answer 1

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

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

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

px根据需要更改 rem 单位。