有沒有辦法使用 querySelector 來獲取打開的影子 dom

Question

假設我創建並插入了這樣的元素

<template id="react-web-component">
  <span>template stuff</span
  <script src="/static/js/bundle.js" type="text/javascript"></script>
</template>
<script>
  (function (window, document) {
    const doc = (document._currentScript || document.currentScript).ownerDocument;
    const proto = Object.create(HTMLElement.prototype, {
      attachedCallback: {
        value: function () {
          const template = doc.querySelector('template#react-web-component').content;
          const shadowRoot = this.attachShadow({ mode: 'open' });
          shadowRoot.appendChild(template.cloneNode(true));
        },
      },
    });
    document.registerElement('react-web-component', { prototype: proto });
  })(window, document);
</script>
<react-web-component></react-web-component>

現在我想使用querySelector來訪問我的元素的開放影子 dom。 像這樣：

document.querySelector('react-web-component::shadow')

但這不起作用。 還有別的辦法嗎？

編輯以回應@Supersharp 的回答

對不起，我沒有說清楚。 我正在使用 webpack 的style-loader ，它只接受與document.querySelector一起使用的 CSS 選擇器，所以我要的是一個 CSS 選擇器，我可以通過這種方式使用。

Answer 1

通過Shadow主機的shadowRoot屬性獲取它：

document.querySelector('react-web-component').shadowRoot

更新資料

曾經有這種CSS選擇器，但現在已棄用。

也許您可以嘗試使用普通DOM而不是陰影DOM。

Answer 2

如果我理解的正確，那么有一個編輯器草案（因此它尚不存在）。

https://drafts.c​​sswg.org/css-scoping/#selectors

因此，答案是“否”，您不能這樣做。

Answer 3

這應該可以解決問題：

const querySelectorAll = (node,selector) => {
    const nodes = [...node.querySelectorAll(selector)],
        nodeIterator = document.createNodeIterator(node, Node.ELEMENT_NODE);
    let currentNode;
    while (currentNode = nodeIterator.nextNode()) {
        if(currentNode.shadowRoot) {
            nodes.push(...querySelectorAll(currentNode.shadowRoot,selector));
        }
    }
    return nodes;
}