如何通过CSS修改第三方Shadow DOM内.controls元素的display属性

首先要明确：Shadow DOM本身是样式隔离的，外部CSS默认无法直接影响其内部元素。但因为这个Shadow DOM是open状态，我们有两种可行方案：

方案一：如果组件暴露了part属性（推荐） #

如果第三方组件的.controls元素定义了part属性（比如组件内部是<div part="controls" class="controls">），可以使用CSS的::part()选择器直接定位：

figspec-file-viewer::part(controls) {
  display: none;
}

这是现代浏览器支持的标准方式，不会破坏组件的封装性。

方案二：通过JavaScript操作Open Shadow DOM #

如果组件没有暴露可样式化的接口，我们可以利用open Shadow DOM的特性，直接通过JS访问并修改其内部样式：

方法1：直接修改元素样式 #

const fileViewer = document.querySelector('figspec-file-viewer');
if (fileViewer.shadowRoot) {
  const controlsEl = fileViewer.shadowRoot.querySelector('.controls');
  if (controlsEl) {
    controlsEl.style.display = 'none';
  }
}

方法2：插入内部样式表 #

如果需要批量修改样式，也可以在Shadow DOM中插入一个样式标签：

const fileViewer = document.querySelector('figspec-file-viewer');
if (fileViewer.shadowRoot) {
  const styleTag = document.createElement('style');
  styleTag.textContent = '.controls { display: none; }';
  fileViewer.shadowRoot.appendChild(styleTag);
}

注意事项 #

• 已废弃的/deep/或::shadow选择器不要使用，它们已经从标准中移除，仅部分旧浏览器支持。
• 只有open状态的Shadow DOM才能通过外部JS访问，closed状态的Shadow DOM无法从外部获取其shadowRoot引用。

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