时间戳

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

css - 如何在 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 {} 块中设置了字体大小，我所有基于 Tailwind 的高度、字体、填充等最终都会被任意调整大小设置为 16px 以外的任何值。

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

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

标签： cssweb-componenttailwind-cssshadow-dom

解决方案

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',
    }
  }
};

根据需要更改 rem 单位px。

推荐阅读