This function observes when the specified elements are added to the document or given context. This is a convenience function for mutationCallback()
import connectedCallback from '@web-native-js/play-ui/src/dom/connectedCallback.js';connectedCallback(els, callback[, context = null[, observeIndirectMutation = true]]);els-HTMLElement|String|Array: The specific element or elements to observe. This could be a single element instance, a CSS selector or an array of element specifiers.callback-Function: The callback function that recieves the notification. This callback will recieve the following arguments.nodes-[HTMLElement]: A variadic list of the elements added to the DOM.
context-DOMDocument|HTMLElement: (Optional) The subtree to observe. This is the document itself by default.observeIndirectMutation-Boolean: (Optional) A specifier that tells whether to watch direct or indirect mutations of the specified elements.
Return
MutationObserver- The instantiated MutationObserver.
<body>
<div id="el1"></div>
</body>
// Obtain an element instance
let el1 = document.querySelector('#el1');
// Observe both by instance and by selector
connectedCallback([el1, '#el2'], (...nodes) => {
console.log('These nodes are now added to the document.', ...nodes);
});
// Start mutating
el1.remove();
setTimeout(() => {
document.body.appendChild(el1); // These nodes are now added to the document. #el1
setTimeout(() => {
document.body.append('<div id="el2"></div>'); // These nodes are now added to the document. #el2
}, 1000);
}, 1000);