如何覆盖#shadow-root内部div的CSS？第三方插件样式修改

仅通过CSS和JS是可以实现的，但具体可行性取决于Shadow Root的模式以及第三方插件的实现方式，以下是分场景的解决方案和最优选择：

一、CSS层面的可行方法 #

Shadow DOM的样式隔离是默认规则，但如果第三方插件的元素暴露了**part属性**，可以使用CSS的::part()选择器穿透样式隔离：

/* 假设第三方插件的宿主元素选择器是 .third-party-plugin，目标div的part属性是 "choice-small" */
.third-party-plugin::part(choice-small) {
  display: none !important;
}

注意：这种方法仅适用于插件主动为目标元素添加了part属性的情况，若插件没有暴露该属性，纯CSS无法穿透封闭的Shadow DOM。

二、JS层面的可行方法 #

1. 开放模式Shadow Root（最常见） #

如果Shadow Root是开放模式（即element.shadowRoot能返回有效节点），可以直接通过JS访问并修改内部元素：

// 1. 定位第三方插件的宿主元素
const host = document.querySelector('.third-party-plugin');
if (!host) return;

// 2. 获取Shadow Root节点
const shadowRoot = host.shadowRoot;
if (!shadowRoot) return;

// 3. 定位目标div并修改样式
const targetDiv = shadowRoot.querySelector('div.choice--size-small');
if (targetDiv) {
  // 方式一：直接修改行内样式
  targetDiv.style.display = 'none';
  
  // 方式二：向Shadow Root插入全局样式（影响所有匹配元素）
  const style = document.createElement('style');
  style.textContent = 'div.choice--size-small { display: none !important; }';
  shadowRoot.appendChild(style);
}

2. 封闭模式Shadow Root #

如果Shadow Root是封闭模式（element.shadowRoot返回null），JS无法直接访问内部DOM，此时仅靠前端CSS/JS无法修改，除非插件提供了官方API或配置项来控制该元素样式。

三、最优方案排序 #

1. 优先使用插件官方API/配置：这是最稳定的方式，不会因插件版本更新导致代码失效，先查看插件文档是否有控制该元素显示的开关。
2. 使用::part() CSS选择器：若插件暴露了part属性，用CSS实现比JS更简洁，符合Shadow DOM的设计规范。
3. JS操作开放模式Shadow Root：在没有API和part属性的情况下，这是最可靠的前端方案，直接操作内部DOM或插入样式。
4. 极端hack方案（不推荐）：若以上都不可行，可尝试用MutationObserver监测DOM变化，或用绝对定位覆盖目标元素，但这类方法兼容性差且易受插件更新影响。

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