Opinions about mutation observer efficiency/reliability to automate dynamic imports

Question

We have a new Lit-element based project and we are thinking of automate some things like dynamic imports. We already done this by implementing two main parts:

• a watcher script checking changes (when serving locally) to ui components and writing to a new file an export with an object containing key-value pairs of component-tag: () => import('path')
• a tags checker that adds a mutation observe in all components shadow DOMs to observe if a new tag was added and import dynamically (if not yet) its class definition (taking it from the object generated by the watcher script)

Now the main questions are:

1. What do you think about this feature ?
2. How much efficient this would be ? (Now the app is very small and has good performance)
3. If think for a lot of DOM changes the performance would decrease. How to prevent this ? A good filtering maybe ?
4. Has anybody tried this approach ? On production ?

THanks

// generated file
export default {
"tag-elem-one": () => import("/src/components/tag-elem-one.js"),
"tag-elem-two": () => import("/src/components/tag-elem-two.js"),
};


// Checker
////////////////////
const attachShadow = HTMLElement.prototype.attachShadow

HTMLElement.prototype.attachShadow = function (option) {
  const sh = attachShadow.call(this, option);

  this.mutationObserver = new MutationObserver((mutations) => {
   mutations.forEach(mutation => {
     if (mutation.addedNodes.length) {
       mutation.addedNodes.forEach(addedNode => {
         if (addedNode.nodeName.includes('-')) {
           const tag = addedNode.nodeName.toLowerCase();
           importTag(tag)
         }
         importTagsInNodeChildren(addedNode)
       })
     }
   })
 });
 this.mutationObserver.observe(this.shadowRoot, {
   childList: true,
   subtree: true
 });

 return sh;
};