How to modify HTMLElement after script loads / elements render?

I'm using @solid-primitives/script-loader to load an external component :

  var [script, remote] = createScriptLoader({
    src: commentoURL,
    onload: async () => {
      (window as any).script.main();
      props.onConnected();
      console.log('timeout fired')
      const collection = document.getElementsByClassName("className");
      console.log('collection: ', collection)
      console.log('collection.length: ', collection.length)

  var [script, remote] = createScriptLoader({
    src: commentoURL,
    onload: async () => {
      (window as any).script.main();
      props.onConnected();
      console.log('timeout fired')
      const collection = document.getElementsByClassName("className");
      console.log('collection: ', collection)
      console.log('collection.length: ', collection.length)

now, the output says collection.length: 0 even though the element is there, just that it hasn;t rendered yet. If I wrap it into setTimeout(1000) it'll work, but then I show the user the wrong content for a while. onMount also doesn't work, as it also fires before the HTML Elements are actually rendered?

3 Replies

mdynnl•2y ago

what does script.main() exactly do? props.onConnected() doesn't look like it renders anything. without knowing what the script does, queueMicrotask might work if your script contains conditionally rendered elements like inside Show for example, you'll have to use some sort of event notification using signals and refs

BersaelorOP•2y ago

the script is from an external source and adds several new htmlelements to a div that is marked with an id.

mdynnl•2y ago

if that script doesn't provide any way to hook into the process, choices are limited, e.g MutationObserver might work as a last resort

Gaming

Programming

How to modify HTMLElement after script loads / elements render?

Did you find this page helpful?