如何通过CSS修改Shadow Root中的自定义元素样式？

问题原因 #

你使用的::shadow、/deep/都是已废弃的Shadow DOM v0语法，目前主流浏览器已不再支持，所以这些样式规则无法生效。Shadow DOM的核心特性是样式隔离，外部样式默认无法穿透到Shadow内部，必须通过标准开放接口实现定制。

解决方案 #

以下是两种标准且推荐的实现方式：

方法1：使用CSS自定义属性（推荐） #

在Shadow内部样式中，为需要定制的元素使用CSS变量，允许外部通过设置变量覆盖样式：

修改自定义元素的内部逻辑：

class GacInput extends HTMLElement {
  constructor() {
    super();
    this.root = this.attachShadow({ mode: 'open' });
    this.root.innerHTML = `
      <style>
        :host {
          display: flex;
          width: min-content;
        }
        input {
          display: block;
        }
        /* 用CSS变量定义可定制样式，设置默认值 */
        label {
          background-color: var(--gac-label-bg, transparent);
          color: var(--gac-label-color, inherit);
        }
      </style>
      <label></label>
      <input type="text">
    `;
  }
  static get observedAttributes() {
    return ['label', 'align'];
  }
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'label') {
      this.root.querySelector('label').innerText = newValue;
    }
    if (name === 'align') {
      switch (newValue) {
        case "right":
          this.style.flexDirection = "row-reverse";
          break;
        case "top":
          this.style.flexDirection = "column";
          break;
        case "bottom":
          this.style.flexDirection = "column-reverse";
          break;
        default:
          this.style.flexDirection = "row";
      }
    }
  }
}
customElements.define('gac-input', GacInput);

外部CSS文件中通过宿主选择器设置变量：

gac-input {
  --gac-label-bg: blue;
  --gac-label-color: white;
}

方法2：使用part属性与::part()选择器 #

在Shadow内部元素上添加part属性，外部可通过::part()选择器直接定位该元素：

修改自定义元素的内部HTML结构：

class GacInput extends HTMLElement {
  constructor() {
    super();
    this.root = this.attachShadow({ mode: 'open' });
    this.root.innerHTML = `
      <style>
        :host {
          display: flex;
          width: min-content;
        }
        input {
          display: block;
        }
      </style>
      <!-- 给label添加part属性 -->
      <label part="input-label"></label>
      <input type="text">
    `;
  }
  static get observedAttributes() {
    return ['label', 'align'];
  }
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'label') {
      this.root.querySelector('label').innerText = newValue;
    }
    if (name === 'align') {
      switch (newValue) {
        case "right":
          this.style.flexDirection = "row-reverse";
          break;
        case "top":
          this.style.flexDirection = "column";
          break;
        case "bottom":
          this.style.flexDirection = "column-reverse";
          break;
        default:
          this.style.flexDirection = "row";
      }
    }
  }
}
customElements.define('gac-input', GacInput);

外部CSS中使用::part()选择器：

gac-input::part(input-label) {
  background-color: blue;
}

额外说明 #

• 不推荐直接在Shadow内部引入外部CSS文件（如<link>标签），这会破坏Shadow DOM的样式隔离特性，失去自定义元素封装的意义。
• 原代码中修改flexDirection的逻辑可简化为直接操作this.style，无需通过this.root.host。

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