polymer - document.getElementById を使用して、ShadowDom から外部 JS に Web コンポーネント要素を公開します。

Question

現在、Polymer の PWA スターター キット テンプレートを使用しています。

https://github.com/Polymer/pwa-starter-kit/tree/template-typescript

私の web-component 要素ページは、DIV 要素を含む次のコードを返します。

return html`
      ${SharedStyles}    
      <section>
        ...my content...

      </section>
      <div id="CONTAINER NAME"></div>
    `

document.getElementById を介して外部 JavaScript から CONTAINER NAME 要素にアクセスする必要があります。それがシャドウ DOM にあることは知っていますが、外部 JS を変更することはできません。質問は、document.getElementById を介して JS からアクセスできるようにする方法ですか?

外部 JavaScript は、iframeを名前付き にロードしますdiv。document.getElementByIdこの外部コンポーネントは、指定された div に iframe をロードするために div 要素を取得する必要があります。

Web コンポーネント ページのシャドウ DOM から div 要素を強制的に DOM に公開/配置する方法を検索しましたが、見つかりませんでした。

ここで言及されているこのソリューションを見つけましたが、PWA テンプレートで機能しませんでした。PWAテンプレートでシャドウドームがカスケードされているのでしょうか？

https://stackoverflow.com/a/47082470/9192527

Web コンポーネント内の div を変更するために引き続き document.getElementbyId を使用する外部 JavaScript (サード パーティ) を使用して、Polymer v3/PWA キットに基づいて Web コンポーネントを更新する方法はありますか?

slotsシャドウ DOM の要素をライト DOM に公開するために使用する可能性を探していますか? しかし、上記のリンクされたソリューションで動作させることはできません。