querySelectorLive
Observe the dom to get all the elements that matches a passed css selector at any point in time. Be warned that this use the mutation observer API and will monitor all the document for new nodes. Make sure to use it when you don’t have the chance to use the custom elements API instead
Params
- selector*-String
The css selector that we are interested in
- cb*-Function
The function to call with the newly added node
- settings{}TQuerySelectorLiveSettings
An optional settings object to specify things like the rootNode to monitor, etc…
Return
- -SPromise<HTMLElement>
An SPromise instance on which to listen for nodes using the “node” event
Example
import { querySelectorLive } from '@blackbyte/sugar/dom'
const query = querySelectorLive('.my-cool-item', (node, api) => {
// do something here with the detected node
// call api.cancel if you want to stop listening for this selector
api.cancel();
});
// cancel the query manually when needed
query.cancel();Settings
- rootNodedocumentHTMLElement
The root node from where to observe childs
- oncetrueBoolean
If true, each observed nodes will be handled only once even if they are removed and reinjected in the dom
- afterFirst-Function
A function that will be called once the first scan is done
- firstOnlyfalseBoolean
If true, the query will stop after the first matching node is found
- when-TWhenTrigger
An optional when trigger or array of triggers to wait for before calling the callback with the detected node
- disconnectedCallback-Function
An optional callback function that will be called when a previously detected node is removed from the dom
- attributes{(‘esm’|‘cjs’)[]}String[]
An optional array of attributes to monitor for changes (in addition to class and id)