Tentei fazer isso e obtive resultados semelhantes. Tentei usar decorateCookedElement porque eventualmente desativaremos decorateCooked
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 }
);
A pequena diferença aqui é que passei a chave com o atributo de dados:
<div data-PAWidget="21R72LUN79CXRZ50"></div>
Isso funciona bem para mim se for a primeira vez que o script é carregado. Se eu visualizar uma postagem com o script, voltar para a lista de tópicos e entrar novamente no tópico, ele não funciona (até que eu atualize). Posso ver que decorateCookedElement está sendo acionado a cada vez que a postagem relevante é carregada, mas há algo impedindo que o script funcione novamente.
Não tenho certeza se está relacionado, mas também vejo um erro Uncaught TypeError: i is null no console de pa.widget.js:
