Javascript 如何从web组件中的脚本节点访问卷影根

我有一个这样的web组件

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

（功能（窗口、文档）{
const doc=（document.|currentScript | document.currentScript）.ownerDocument；
const proto=Object.create（HTMLElement.prototype{
附件回调：{
值：函数（）{
const template=doc.querySelector（'template#component'）。内容；
const shadowRoot=this.attachShadow（{mode:'open'}）；
appendChild（template.cloneNode（true））；
}
}
});
registerement（'react-webcomponent'，{prototype:proto}）；
})（窗口、文件）；

在我的

bundle.js

中，我想访问我的web组件，但我如何访问它

---

我尝试使用

document.currentScript

，但它总是返回

null

，这似乎是，但我如何访问此组件的

影子根

，或者更具体地说，我如何访问此组件的

#react app

，请记住，此web组件可能会多次添加到网页。

您是否尝试了parentElement？

parentElement

什么

document.currentScript

始终为

null

，因为您无法直接执行此操作，因此最好使用一种解决方法，即从自定义元素调用脚本