有没有办法使用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

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

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

所以答案是 “否”，则无法做到这一点。

Answer 2

由影子主机的shadowRoot财产得到它：

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

更新以前是这样的CSS选择器的

在那里，但现在它已经过时了。

也许你可以尝试使用正常的DOM而不是Shadow DOM。