如何让Shadow DOM中rem以16px为基准而非继承HTML根字体大小？

你遇到的问题是Shadow DOM里的rem会继承主文档根元素的字体大小，导致UI在不同网站显示不一致，以下是几种靠谱的解决方法：

方案1：用CSS变量重定义基准，转换rem为calc表达式 #

如果你的UI库已经写死了rem单位，可以在Shadow DOM的样式开头定义一个固定基准变量，然后把库中的rem值转换成基于这个变量的calc表达式：

:host {
  --fixed-rem: 16px; /* 固定基准为16px */
}

/* 示例：把库中的样式替换成calc形式 */
.library-button {
  font-size: calc(var(--fixed-rem) * 1); /* 对应原1rem */
  padding: calc(var(--fixed-rem) * 0.5) calc(var(--fixed-rem) * 1); /* 对应原0.5rem 1rem */
}

如果库的样式文件较多，可以用PostCSS之类的工具批量替换，把所有Xrem替换成calc(var(--fixed-rem) * X)，效率更高。

方案2：改用em单位并固定宿主元素字体大小 #

em单位是相对于父元素的字体大小，而Shadow DOM的样式是隔离的，不会受主文档影响。你可以先给Shadow的宿主元素固定字体大小，再把库中的rem替换成em：

:host {
  font-size: 16px !important; /* 固定宿主元素字体大小为16px */
}

/* 示例：库中样式的rem改成em */
.library-card {
  font-size: 1.25em; /* 对应原1.25rem */
  margin: 0.75em 0; /* 对应原0.75rem 0 */
}

这种方法操作简单，只要替换单位就能让所有尺寸以Shadow内部的16px为基准，完全不受主文档影响。

方案3：动态修改主文档根字体大小（不推荐） #

你也可以用JS临时修改主文档<html>的font-size为16px，同时记录原大小，在Shadow销毁时恢复。但这种方法会影响主文档的整体样式，容易引发页面布局错乱，不建议使用。

内容的提问来源于stack exchange，提问作者GorvGoyl