Mutation on Shopify Customizer

[mjbalutan1]

The code below doesn't work when the customizer is fully loaded. The goal of this code is to check for changes within the section, so that I could run functions on it.

if (Shopify.designMode) {
  document.addEventListener('DOMContentLoaded', function(){
    const targetNode = document.getElementById("#shopify-section-{{ section.id }}");

    // Options for the observer (which mutations to observe)
    const config = { attributes: true, childList: true, subtree: true };
  
    // Callback function to execute when mutations are observed
    const callback = (mutationList, observer) => {
      for (const mutation of mutationList) {
        if (mutation.type === "childList") {
          console.log("A child node has been added or removed.");
        } else if (mutation.type === "attributes") {
          console.log(`The ${mutation.attributeName} attribute was modified.`);
        }
      }
    };
  
    // Create an observer instance linked to the callback function
    const observer = new MutationObserver(callback);
  
    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);
  });
}