CSS样式隔离方案

当我们想让保护一个元素不被外部 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-size100px, 在 Element Panel 中可以看到, ShadowDOM 继承了 Body 的样式... 并且 :root 选择器失效了...

  1. iframe

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

  1. all: initial

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

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