如何为Shadow Root内的元素设置样式？已尝试JS和CSS均无效

一、修复JS方法的错误 #

你当前JS代码报错的原因有两个：

1. getElementById()的参数不需要带#，你传入#aab-select-label会导致找不到目标元素，返回null，进而触发Cannot read properties of null错误。
2. 可能未等待DOM完全加载就执行代码，此时#select-input或它的shadowRoot还未生成。

修正后的代码：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  const selectInput = document.querySelector('#select-input');
  // 先确认元素和shadowRoot存在
  if (selectInput?.shadowRoot) {
    const targetLabel = selectInput.shadowRoot.getElementById('aab-select-label');
    if (targetLabel) {
      // 直接设置样式
      targetLabel.style.height = '20px';
      // 或者用setAttribute设置（如果需要!important）
      // targetLabel.setAttribute('style', 'height: 20px !important;');
    }
  }
});

二、CSS方法的正确姿势 #

::shadow和/deep/是已废弃的旧版Shadow DOM选择器，当前主流浏览器已不再支持，推荐以下三种标准方案：

1. 使用CSS Parts（推荐，如果自定义元素支持） #

如果自定义#select-input元素的内部代码给目标标签添加了part属性，比如：

<!-- 自定义元素内部的结构 -->
<div class="mb-1">
  <label id="aab-select-label" part="select-label">...</label>
</div>

那么外部可以通过::part()选择器直接设置样式：

#select-input::part(select-label) {
  height: 20px !important;
}

2. 使用CSS变量 #

在自定义元素的内部样式中，用CSS变量控制目标元素的高度：

<!-- 自定义元素内部的样式 -->
#aab-select-label {
  height: var(--select-label-height, 30px); /* 30px是默认高度 */
}

然后在外部样式中给自定义元素设置变量值：

#select-input {
  --select-label-height: 20px;
}

3. 通过JS注入样式到Shadow Root #

如果以上两种方法都无法使用，因为是开放的shadowRoot，你可以直接往shadowRoot里插入样式表：

document.addEventListener('DOMContentLoaded', () => {
  const selectInput = document.querySelector('#select-input');
  if (selectInput?.shadowRoot) {
    const styleSheet = document.createElement('style');
    styleSheet.textContent = `
      .mb-1 #aab-select-label {
        height: 20px !important;
      }
    `;
    selectInput.shadowRoot.appendChild(styleSheet);
  }
});

内容的提问来源于stack exchange，提问作者Ricardo de Vries