ReactJS应用无法定位shadow-root内元素，原Angular/deep/方法失效求助

嘿，这个问题我之前也踩过坑！先给你说清楚为啥/deep/没用了——它是浏览器旧的样式穿透选择器，早就被标准废弃了，不管是React还是现在的Angular都不支持啦。要访问Shadow DOM里的元素，得用原生的Shadow DOM API来操作，下面给你一步步讲怎么弄：

核心思路：先找宿主元素，再访问Shadow Root #

你已经能定位到$("#root .px-app-nav")这个层级，这就是包含Shadow-Root的宿主元素。接下来要做的是：

1. 把jQuery对象转成原生DOM元素（因为Shadow Root是原生API）
2. 检查宿主元素的shadowRoot属性（只有开放模式的Shadow DOM才能外部访问）
3. 在Shadow Root内部用原生选择器或jQuery查找目标元素

示例代码（原生JS版） #

// 第一步：获取宿主元素（原生DOM）
const hostElement = document.querySelector('#root .px-app-nav');

// 第二步：确认Shadow Root存在且可访问
if (hostElement?.shadowRoot) {
  // 第三步：在Shadow Root里查找你需要的元素，替换成你的目标选择器即可
  const targetElement = hostElement.shadowRoot.querySelector('.your-target-class');
  
  // 找到后就能操作元素啦
  if (targetElement) {
    console.log('找到目标元素：', targetElement);
    // 比如修改样式、绑定事件
    targetElement.style.color = 'red';
  }
}

示例代码（jQuery版） #

如果你习惯用jQuery，也可以这么写：

// 第一步：获取宿主元素的原生DOM（jQuery取第一个元素）
const hostElement = $('#root .px-app-nav')[0];

if (hostElement?.shadowRoot) {
  // 把Shadow Root内部的DOM包装成jQuery对象，再用find查找
  const $targetElement = $(hostElement.shadowRoot).find('.your-target-class');
  
  if ($targetElement.length) {
    console.log('找到目标元素：', $targetElement);
    $targetElement.css('color', 'red');
  }
}

重要注意事项 #

• 如果宿主元素的Shadow DOM是closed模式创建的（也就是attachShadow({mode: 'closed'})），那么shadowRoot属性会返回null，外部代码根本无法访问里面的元素——这是Shadow DOM的封装特性决定的，这种情况只能找组件内部的代码来暴露访问方式。
• 别再用/deep/、::shadow这些旧语法了，现代浏览器都已经移除支持了，用原生API才是长久之计。

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