我正在 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 覆盖字体大小，也尝试将组件包装在另一个标签中，但似乎都不起作用。