コンポーザーに外部ウィジェットを追加する

開発
7

試してみましたが、同様の結果になりました。最終的には decorateCooked を非推奨にする予定なので decorateCookedElement を使用しようとしました。

 api.decorateCookedElement(
    (element) => {
      element.childNodes.forEach((node) => {
        if (node.dataset && node.dataset.pawidget) {
          node.insertAdjacentHTML(
            "beforeend",
            "<div id='PurpleAirWidget_11726_module_AQI_conversion_C0_average_0_layer_standard'>Loading PurpleAir Widget...</div>"
          );

          loadScript(
            `https://www.purpleair.com/pa.widget.js?key=${node.dataset.pawidget}&module=AQI&conversion=C0&average=0&layer=standard&container=PurpleAirWidget_11726_module_AQI_conversion_C0_average_0_layer_standard`
          );
        }
      });
    },
    { id: "widget-append", onlyStream: true, afterAdopt: true }
  );

ここでわずかに異なるのは、データ属性にキーを渡したことです。

<div data-PAWidget="21R72LUN79CXRZ50"></div>

これは、スクリプトが初めて読み込まれる場合にのみ、私にとってはうまく機能します。スクリプトが表示されている投稿を表示してから、トピックリストに戻ってトピックを再入力すると、機能しません（更新するまで）。関連する投稿が読み込まれるたびに decorateCookedElement が実行されていることはわかりますが、スクリプトが再度機能するのを妨げている何かがあります。

関連しているかどうかわかりませんが、pa.widget.js からコンソールに Uncaught TypeError: i is null というエラーも表示されます。

Screen Shot 2021-11-08 at 9.11.39 PM