为何自定义元素的:host选择器被:where选择器覆盖？如何解决？

你遇到的情况是因为Shadow DOM内部的:host样式作用于自定义元素的宿主节点，而外部针对宿主节点的样式（哪怕是零特异性的:where选择器）会优先覆盖内部的:host声明——这是Shadow DOM的设计规则，外部样式对宿主节点的控制优先级高于内部:host定义的样式。

方案1：直接设置Shadow内部元素的样式（推荐） #

将Shadow DOM内的文本包裹在一个元素中，直接为这个内部元素设置颜色样式。由于Shadow DOM的样式隔离特性，外部样式无法穿透到内部元素，因此不会被覆盖。

customElements.define(
  'my-custom-element',
  class extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.innerHTML = `
        <style>
          .inner-text { color: blue; }
        </style>
        <span class="inner-text">Text which stays blue.</span>
      `;
    }
  }
);

方案2：使用!important强制:host样式（不推荐） #

如果一定要通过:host控制宿主节点的颜色，可以给内部样式加上!important，强制其优先级高于外部样式。但这种方法会打乱常规的CSS优先级规则，不利于后续维护。

customElements.define(
  'my-custom-element',
  class extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.innerHTML = `
        <style>
          :host { color: blue !important; }
        </style>
        Text which stays blue.
      `;
    }
  }
);

方案3：使用CSS变量定义默认值 #

通过CSS变量设置文本颜色的默认值，既保留内部样式的默认行为，也允许外部通过变量主动修改（如果需要的话）。如果不想外部修改，直接写死颜色值即可。

customElements.define(
  'my-custom-element',
  class extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.innerHTML = `
        <style>
          :host { --text-color: blue; }
          .inner-text { color: var(--text-color); }
        </style>
        <span class="inner-text">Text which stays blue by default.</span>
      `;
    }
  }
);

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