设置all: initial后Web Component仍继承父样式的原因是什么？

失效原因 #

1. 样式优先级冲突
   你直接通过JS给宿主<div>元素设置了color: green、fontSize: 'large'的内联样式，而Shadow DOM中:host选择器的样式优先级低于宿主元素的内联样式，导致你写的:host { all: initial; } 被覆盖，没有实际生效，宿主元素仍保留了你设置的绿色、大号字体属性。
2. 可继承属性的穿透规则
   Shadow DOM的边界不会阻断color、font-size这类可继承属性的传递，默认情况下，Shadow内部没有设置对应属性的元素，会自动继承宿主元素的可继承属性值，哪怕宿主元素的属性是默认初始值也不例外。

解决方案 #

如果要实现Web Component完全不继承外部样式，需要同时重置宿主和内部所有元素的属性：

// 把Shadow内部的样式调整为如下
a.attachShadow({mode: 'closed'}).innerHTML = `
      <style>
        :host {
          all: initial !important;
          display: block;
        }
        /* 重置内部所有元素的全部属性，阻断继承 */
        :host * {
          all: initial;
          box-sizing: border-box;
        }
      </style>
      <p>
        A paragraph element which should not inherit any styles from its parent webpage (outside the shadow DOM).
      </p>`;

如果不想用!important，也可以避免通过内联样式给宿主元素设置可继承属性，改用其他方式实现宿主的样式需求。

内容的提问来源于stack exchange，提问作者Gaurang Tandon