Detect when rendered custom code block is removed from the DOM

Developers: Plugin & API
1

I’m creating a plugin that replaces a custom codeblock (```mv ```) with a <model-viewer> element (https://modelviewer.dev/) using registerMarkdownCodeBlockProcessor. Until now, everything has been working nicely, but I’ve been struggling with something.

Apparently, whenever the rendered element gets out of view, Obsidian removes it from the DOM, probably to spare resources, and then reinserts it when it appears in the view once again. Unfortunately, this breaks the <model-viewer> element, and even though the reinserted element is exactly the same, something gets lost along the way. Strangely, no errors occur on the console.

I’ve tried using a MutationObserver to detect whenever the element is removed or reinserted, so I could do something about it, but apparently whichever method Obsidian uses to toggle the element on and off doesn’t trigger the mutation event.

I won’t ask for a way to disable this because it would not be optimal resource-wise, but if someone more knowledgeable could enlighten me if something can be done on Obsidian’s API side or whatever method is used internally to hide the element, so I could prevent this behavior (e.g., retrigger the reloading of the library or something).

Additional context

  1. All my logic is inside:
async onload() {    
  this.registerMarkdownCodeBlockProcessor("mv", (src, el, ctx) => {
    // ...
  }
}
  1. I’m using el.appendChild to add the element, is this the recommended approach or should I use createEl (or some other function), would it even solve this problem? Unfortunately it isn’t very well documented so I couldn’t understand how it works (createEl | Obsidian Plugin Developer Docs)

Thanks.