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

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

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

web 组件的 shadow-dom 封装了大部分样式和 css，因此（大部分）没有样式从 web 组件所在的网页到 shadow dom 内部的渗漏，反之亦然。

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

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

由于REM值固有的从父HTML {}块，这意味着，所有我的基于顺风-高度，字体，填充等的卷起如果对象页面已经在他们的页面的HTML设置字体大小得到任意大小{} 块设置为 16px 以外的任何值。

在我回去尝试从我的组件中完全剥离 Tailwind 之前，有什么方法可以防止 shadow-dom 从主页的 html {} 块的 font-size 继承吗？一个 web 组件提供几乎所有的封装样式，只是被迫从页面继承根字体大小，这似乎很荒谬。

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

解决方法

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

第二，在 16px 标签上设置除 html 以外的任何字体大小并不是更改字体大小的唯一方法。某些浏览器允许直接更改默认字体大小作为浏览器设置的一部分。因此，网站可能不会将 font-size 设置为任何内容，但最终可能仍会为网站使用不同的默认大小，并且对于 Tailwind CSS 来说事情可能会失控。因此，Tailwind 使用 rem 作为合理的默认值，以根据应用程序浏览器的 font-size font-size 设置在 html 标签中采用布局和单位。

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