如何在主DOM含指定类时修改Shadow DOM内元素的CSS？

不行哦，你写的.parent-div .child-div { display:none }这种常规CSS选择器是没办法穿透Shadow DOM的。

这是因为Shadow DOM的核心特性就是样式封装——它内部的DOM结构和样式默认是和外部主DOM隔离的，外部的CSS规则无法直接选中Shadow DOM里面的元素，哪怕外部有对应的父元素类名也没用。

不过针对你的需求，有两种可行的解决办法：

方法1：使用Shadow DOM的:host-context()伪类 #

这是最贴合你需求的CSS方案，你可以在Shadow DOM内部的样式里添加这段代码：

:host-context(.parent-div) .child-div {
  display: none;
}

:host-context()的作用是检测Shadow宿主元素（也就是你的#shadow_host）是否处于某个外部祖先元素的范围内，当外部存在.parent-div作为祖先时，就会对Shadow内的.child-div应用样式，完美匹配你的场景。

方法2：通过JavaScript操作Shadow根 #

因为你的Shadow DOM是open模式（代码里标注了#shadow-root(open)），外部JS可以获取到Shadow根节点，然后动态添加样式：

// 获取Shadow宿主元素
const shadowHost = document.getElementById('shadow_host');
// 确认能拿到Shadow根
if (shadowHost.shadowRoot) {
  // 创建样式元素并添加到Shadow根里
  const styleEl = document.createElement('style');
  styleEl.textContent = `.child-div { display: none; }`;
  shadowHost.shadowRoot.appendChild(styleEl);
}

如果需要结合外部.parent-div的存在条件，还可以加个判断：

const parentDiv = document.querySelector('.parent-div');
const shadowHost = document.getElementById('shadow_host');

if (parentDiv && shadowHost.shadowRoot) {
  const styleEl = document.createElement('style');
  styleEl.textContent = `.child-div { display: none; }`;
  shadowHost.shadowRoot.appendChild(styleEl);
}

简单来说，Shadow DOM的封装性阻断了外部CSS的直接穿透，但我们可以用它提供的专属CSS伪类或者JS API来实现你要的效果。

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