有没有办法使用 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 访问我的元素的 open 阴影 dom。像这样：

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

但这不起作用。还有其他办法吗？

编辑以回应@Supersharp 的回答

Sorry, I wasn't making myself clear. I am using webpack's style-loader that only accepts a CSS selector that it uses with document.querySelector, so what I am asking is for a CSS selector I can use this way.

Answer 1

通过影子宿主shadowRoot属性获取：

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

更新

以前有这种CSS选择器，现在已经弃用了。

也许您可以尝试使用普通 DOM 而不是阴影 DOM。

Answer 2

如果我没理解错的话，它有一个编辑草稿（因此它还不存在）。

https://drafts.csswg.org/css-scoping/#selectors

所以答案是"no"，你做不到。

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;
}

有没有办法使用 querySelector 来获得开放的阴影 dom

Is there a way to use querySelector to get an open shadow dom

javascript

shadow-dom

html5-template