在InternetExplorer中使用jQuery穿透阴影DOM

我试图在Angular Elements web组件中使用jQuery，该组件采用ShadowDom封装，但在internet explorer（特别是IE11）中遇到了问题。解析到shadowRoot，然后使用jQuery find方法和ID以外的选择器时，会触发错误。错误消息为：

Unable to get property 'length' of undefined or null reference

我创建了一个简单的页面来隔离问题，并且能够重现相同的错误

    <h2>Hello from outside the Shadow DOM!</h2>

    <div class='parent'></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/shadydom/1.1.0/shadydom.min.js"></script>
    <script
      src="https://code.jquery.com/jquery-3.4.1.js"
      integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
      crossorigin="anonymous"></script>

    <script>
      // Setup an element in the shadow DOM
      var element = $('.parent')[0];
      var shadow = element.attachShadow({mode: 'open'});

      var text = document.createElement('span');
      text.id = 'subtitle';
      text.textContent = 'Hello from inside the Shadow DOM!';

      shadow.appendChild(text);      
      //-- End Setup

      // This is how the web component code is getting access to the shadow root
      var shadowRoot = $(element.shadowRoot);

      // No problems with this find call
      var subtitle = shadowRoot.find('#subtitle');

      // IE Bug is triggered here
      var span = shadowRoot.find('span');

      console.log('jQuery set count: ' + span.length);
    </script>

以下是发生错误时的堆栈：

---

这是jQuery和IE11中的影子DOM的已知问题吗？有什么解决方案吗？

在使用F12开发人员工具调试javascript之后，我们可以看到范围未定义。因此，它将显示无法获取未定义或空引用错误的属性“length”

要解决此错误，请尝试从元素变量而不是从shadowRoot中查找span元素。请检查以下代码：

<script>
    // Setup an element in the shadow DOM
    var element = $('.parent')[0];
    var shadow = element.attachShadow({ mode: 'open' });

    var text = document.createElement('span');
    text.id = 'subtitle';
    text.className = "spanitem";
    text.textContent = 'Hello from inside the Shadow DOM!';

    shadow.appendChild(text);
    //-- End Setup

    // This is how the web component code is getting access to the shadow root
    var shadowRoot = $(element.shadowRoot);

    // No problems with this find call
    var subtitle = shadowRoot.find('#subtitle');

    // 
    var span = $(element).find('span');

    console.log('jQuery set count: ' + span.length); 
</script>

---

我发现了一个在IE11和Chrome上可以持续工作的解决方案。将shadowdom元素放在具有ID的容器div中，可以解析到容器并从该上下文中查找元素。以下是更新的代码：

<script>
  // Setup an element in the shadow dom
  var element = $('.parent')[0];
  var shadow = element.attachShadow({mode: 'open'});

  var container = document.createElement('div');
  container.id = 'container';
  container.innerHTML = '<span>Hello from inside the Shadow DOM!</span>'

  shadow.appendChild(container);      
  //-- End Setup

  // This is how site search get access to the shadow root
  var shadowRoot = $(element.shadowRoot);

  // Use the shadow root to resolve to the cotnainer by ID 
  // and then finding any other elements in the shadow DOM
  // works as expected.
  var container = shadowRoot.find('#container');
  var span = container.find('span');

  console.log('jQuery set count: ' + span.length);

</script> 

---

谢谢你的回答。我运行了您的更改，发现它在IE11中提供了预期的结果，但在Chrome中无法正常工作。在Chrome中，span.length等于零，这是有意义的，因为影子DOM应该防止从外部执行的查询中选择它所包含的元素。引用shadowRoot是访问其元素的方式。在IE11中，jQuery在很多方面都不能正确地与影子DOM一起工作。