webcomponent 样式隔离问题

使用 webcomponent 进行样式隔离需要注意继承影响样式

使用 webcomponent 的 shadowdom 可以很好的实现样式隔离，例如：

<style>
  p {
    color: red;
  }
</style>

<test-item></test-item>

<template id="itemTemplate">
  <p class="test-color">TEST CSS</p>
</template>
<script>
  class Item extends HTMLElement {
    connectedCallback() {
      const content = document
        .getElementById("itemTemplate")
        .content.cloneNode(true);
      this.attachShadow({ mode: "open" }).appendChild(content);
    }
  }
  window.customElements.define("test-item", Item);
</script>

执行代码可以看到页面中的 p 标签并没有变成红色，说明外部的选择器是无法选择到 shadowdom 内部的节点的，很好的实现了我们想要的样式隔离。

但是如果此时给任一父组件加上可继承的样式，例如给 body 加上 color

body {
  color: red;
}

重新执行就会发现 p 标签就变成红色，查看控制台会发现是从 body 继承了 color。有点隔离失效的意思。

所以父组件修改样式是可被继承的样式时，如果不想子组件被影响，最好在子组件或子组件最近一层父组件中设置具体的颜色，避免给父组件影响。