如何为ShadowRoot树设置独立根font-size以适配Bootstrap样式？

核心问题原因 #

rem单位的计算始终基于主文档的<html>根元素字体大小，而非ShadowRoot内的元素，所以宿主页面修改根字体大小会直接影响ShadowRoot中Bootstrap组件的样式表现。以下是三种可行的解决思路：

方法1：重写Bootstrap CSS变量（推荐，无需重新编译） #

Bootstrap 5+大量使用CSS变量，我们可以在ShadowRoot内部重定义基准变量，替换默认的1rem依赖：

1. 在ShadowRoot的内部样式开头添加基准变量定义：

/* 自定义弹窗的根字体大小基准 */
:host {
  --custom-root-font-size: 16px;
  /* 替换Bootstrap默认的根字体变量 */
  --bs-root-font-size: var(--custom-root-font-size);
}

/* 重新计算Bootstrap核心变量，全部基于自定义基准 */
:host {
  --bs-body-font-size: var(--bs-root-font-size);
  --bs-body-line-height: calc(1.5 * var(--bs-root-font-size));
  --bs-border-radius: calc(0.375 * var(--bs-root-font-size));
  --bs-border-width: calc(0.0625 * var(--bs-root-font-size));
  --bs-spacing-1: calc(0.25 * var(--bs-root-font-size));
  --bs-spacing-2: calc(0.5 * var(--bs-root-font-size));
  /* 更多Bootstrap变量可参考官方文档补充 */
}

2. 对Bootstrap中硬编码rem的样式做覆盖：

/* 示例：修正模态框内边距 */
.modal {
  padding: calc(1 * var(--custom-root-font-size)) calc(1.5 * var(--custom-root-font-size)) !important;
}

/* 示例：修正按钮尺寸 */
.btn {
  font-size: var(--bs-body-font-size) !important;
  padding: calc(0.375 * var(--custom-root-font-size)) calc(0.75 * var(--custom-root-font-size)) !important;
}

方法2：编译Bootstrap时将rem替换为em #

如果使用Bootstrap的SCSS源码编译，可通过自定义函数将所有rem单位转换为em（em基于父元素字体大小，即ShadowRoot内的弹窗容器）：

1. 在SCSS文件中添加自定义函数并覆盖Bootstrap默认函数：

// 定义弹窗基准字体大小
$custom-root-font-size: 16px;

// 自定义px转em的函数
@function em($px-value) {
  @return $px-value / $custom-root-font-size * 1em;
}

// 替换Bootstrap默认的rem函数
@function rem($px-value) {
  @return em($px-value);
}

// 导入Bootstrap源码
@import "bootstrap/scss/bootstrap";

2. 编译后将CSS注入ShadowRoot，并给弹窗容器设置基准字体：

.popup-container {
  font-size: 16px !important;
}

方法3：用CSS隔离重置容器样式 #

通过all: initial完全重置弹窗容器的继承样式，再设置自定义字体大小，避免宿主页面样式干扰：

/* ShadowRoot内部样式 */
.popup-container {
  all: initial;
  font-size: 16px;
  font-family: system-ui, -apple-system, sans-serif; /* 重置字体 */
  box-sizing: border-box; /* 修复盒模型 */
}

/* 引入Bootstrap样式 */
@import url('path/to/your/compiled/bootstrap.css');

注：此方法会清除所有默认样式，可能需要额外调整Bootstrap组件的基础表现。

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