How to observe readonly properties of an HTMLElement in JavaScript?

Question

I wanted to observe "isConnected" property of an HTMLElement. But since it's a read-only property no propertyDiscriptor exists on it. So the classic approach of overriding getter and setter or creating a proxy object won't be useful.

I have read on mutationObserver, that they can only observe attributes. They are also heavy for our application as we need to observe this propperty(isConnected) on every dynamic element that we create ( 80% of the application is just dynamic elements).

Is there any other way to observe changes to readonly properties?

Answer 1

The OP should give MutationObserver a try. For the OP's case a node's isConnected attribute can not be directly observed but the same information ... node either is or is not part of the rendered DOM ... can be retrieved from a 'childList' mutation type ...

function handleDomChanges(mutationsList, observer) {
  for (const mutation of mutationsList) {
  debugger;
    const {
      type, attributeName,
      addedNodes, removedNodes
    } = mutation;
    if (type === 'childList') {
      if (addedNodes.length >= 1) {

        console.log(`${ addedNodes.length } child node(s) has/have been added`);
      }
      if (removedNodes.length >= 1) {

        console.log(`${ removedNodes.length } child node(s) has/have been removed`);
      }
    } else if (type === 'attributes') {
      console.log(`The ${ attributeName } attribute has been mutated.`);
    }
  }
};

const config = {
  attributes: true,
  childList: true,
  subtree: true
};
const targetNode = document.querySelector('#app');

const observer = new MutationObserver(handleDomChanges);

observer.observe(targetNode, config);
// observer.disconnect();


const listNode = document.querySelector('#navList');

const itemNode = document.createElement('li');
const testNode = document.createElement('a');
testNode.href = '\/';
testNode.textContent = 'test 4';

itemNode.appendChild(testNode);

console.log({
  testNodeIsConnected: testNode.isConnected
});
listNode.appendChild(itemNode);

console.log({
  testNodeIsConnected: testNode.isConnected
});
testNode.remove(); 

console.log({
  testNodeIsConnected: testNode.isConnected
});
itemNode.appendChild(testNode);

console.log({
  testNodeIsConnected: testNode.isConnected
});

.as-console-wrapper {
  bottom: 0;
  left: auto!important;
  min-height: 100%;
  width: 50%;
}

<div id='app'>
  <nav>
    <ul id="navList">
      <li><a href="/">test 1</a></li>
      <li><a href="/">test 2</a></li>
      <li><a href="/">test 3</a></li>
    </ul>
  </nav>
</div>