写在前面
写过自定义组件的同学应该知道，由于 Web Components 自带样式隔离的原因，外部很难修改自定义标签内部样式，但也有很多略带麻烦的“办法”来解决Web Components中引入外部CSS的8种方法。
在我们的业务场景中，我们使用了 CSS 变量来解决这个问题，但依旧略显麻烦，有没有更好的方案呢？
本文就此问题给出了另一种解决方案：利用 em 来控制自定义标签的大小。
问题场景
一个宽度 50px 像素的 switch 组件，如果要将它的宽度改为 35px，就需要这么做：
<my-switch style="
--switch-container-width: 35px; // switch 宽
--switch-container-height: 22px; // switch 高
--switch-round-width: 20px; // switch 圆形按钮宽
--switch-round-height: 20px; // switch 圆形按钮高
" />
一看就头大，且繁琐。
为了解决这个问题，探索了一个方法，其核心思路是：在组件内部使用 em 单位，然后在组件根节点上设置 font-size。
CSS单位em
CSS提供数种表达长度的不同单位：em、px、rem、pt、cm、in等等，其中px是大家最常用的，然后就是 em 和rem。
当你搜索有关em单位的时候，基本会告诉你em的缺点：
而正是这个缺点，为 Web 组件提供了一种“优雅”改变大小的方案。
相对单位em的妙用
em 是一个相对于元素本身字体大小的相对单位，它的值会继承父元素的字体大小。
那么在组件中，只要内部嵌套的标签上不去设置font-size，那他就会层层往上去寻找可以去继承的font-size。相关效果和代码如下：
希望对大家有帮助，以上是这次的简单分享，谢谢！
