Search code examples
javascriptdommutation-observers

JavaScript/DOM: MutationObserver to detect changes on `lang` attributes anywhere in the DOM tree


Is it possible to detect lang attribute changes anywhere in the document with one single MutationObserver? I thought maybe something like the following would do the trick, but it's not working as expected (does only detect lang attribute changes at root element).


// This is NOT working as expected!!!

const observer = new MutationObserver(() => {
  console.log('lang attribute has changed');
});

observer.observe(document, {
  attributes: true,
  attributeFilter: ['lang'],
  subtree: true

  // if I add `childList: true` here as sometime suggested on stackoverflow,
  // lang attribute changes somewhere deep in the document are
  // still not detected.
});

Solution

  • The following code (same as in the question) is indeed working and will detect lang attribute changes anywhere in the document. But it is important to know that only lang attribute changes in the light DOM will be detected, changes in the shadow DOM will NOT be observed.

    const observer = new MutationObserver(() => {
      console.log('lang attribute has changed');
    });
    
    observer.observe(document, {
      attributes: true,
      attributeFilter: ['lang'],
      subtree: true
    });