如何从Web组件中的脚本节点访问影子根

Question

我有一个像这样的网络组件

<template id="component">
    <link href="/static/css/main.cacbacc7.css" rel="stylesheet">
    <script src="/static/js/bundle.js" type="text/javascript"></script>
    <div id="react-app"></div>
</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#component').content;
          const shadowRoot = this.attachShadow({ mode: 'open' });
          shadowRoot.appendChild(template.cloneNode(true));
        }
      }
    });
    document.registerElement('react-webcomponent', { prototype: proto });
  })(window, document);
</script>

在我的bundle.js内，我想访问我的网络组件，但如何访问它？

我尝试使用document.currentScript，但它总是返回null，似乎是on purpose，但我如何访问此组件的shadow root，或者是更具体地说，我将如何访问此组件的#react-app，请记住，此Web组件可能会多次添加到网页中。