CSS样式隔离方案

发表于 分类于 ， 阅读次数： 阅读次数： Valine： 本文字数： 588
原以为 ShadowDOM 可以直接解决掉样式隔离问题, 但是实际上 ShadowDOM 并不可靠

当我们想让保护一个元素不被外部 CSS 所污染时, 有如下方案

  1. 让元素不被选中

    1. 覆写所有可继承样式
    2. 使用 custom elements 自定义标签名防止被选中

可用是可用, 但是 css 会写起来很乱

  1. 采用 ShadowDOM

ShadowDOM 看起可以在 HTML 中产生一个隔离环境, 但是可继承的样式并不会被隔离. 例如,

  • 在外部 css 中定义

    html{
  font-size: 100px
}

  • 在 ShadowDOM 中写入 css

    :root, :host{
  font-size: 50px
}

  • 在 ShadowDOM 中使用

    span{
  font-size: 1rem; /* 最后得到的是 100px */
}

最后我们 ShadowDOM 中的 font-size 为 100px, 在 Element Panel 中可以看到, ShadowDOM 继承了 Body 的样式... 并且 :root 选择器失效了...

  1. iframe

最彻底的解决方案, 但是 iframe 并不好用

  1. all: initial

这个 css 可以重置来自上级页面可继承的 CSS, 但是当内部元素恰好命中了外部 CSS 选择器时仍然会被修改样式

综上, 最佳方案似乎是 all: initial + ShadowDOM: all: initial 阻止了宿主网页的样式侵入到 ShadowDOM 内部, 而 ShadowDOM 则阻止了宿主网页里相同类名的样式应用到内部, 它们俩正好形成了一个互补.