Quería observar la propiedad "isConnected" de un HTMLElement. Pero dado que es una propiedad de solo lectura, no existe propertyDiscriptor en ella. Por lo tanto, el enfoque clásico de anular getter y setter o crear un objeto proxy no será útil.
He leído en MutationObserver que solo pueden observar atributos. También son pesados para nuestra aplicación, ya que debemos observar esta propiedad (isConnected) en cada elemento dinámico que creamos (el 80% de la aplicación son solo elementos dinámicos).
¿Hay alguna otra forma de observar los cambios en las propiedades de solo lectura?
El OP debería probar MutationObserver . Para el caso de OP, el atributo isConnected de un nodo no se puede observar directamente, pero la misma información ... el nodo es o no es parte del DOM representado ... se puede recuperar de un tipo de mutación 'childList' ...
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>