The idea would be to add a new method to dom elements and to the document like .querySelector() but which would share a syntax with matchMedia:
const element = document.getElementById('my-id');
const selector = '.css [data-query] :scope';
const qs = element.makeQuerySelector(selector);
qs.get() === element.querySelector(selector);
qs.get({ all: true }) === element.querySelectorAll(selector);
The real benefits would be since now makeQuerySelector returns an object instead of a direct value (like a DOM element), we will be able to iterate in the future and add new methods and avoid having to add to the elements' prototype new methods.
Another thing we could (and which was the basis of my proposal) is to add a .addEventListener method to it:
const onChangeOne = (event) => {
console.log('matched? ', event.element !== null);
}
qs.addEventListener('change', onChangeOne);
const onChangeAll = (event) => {
console.log('matched? ', event.elements.length !== 0);
}
qs.addEventListener('change', onChangeAll, { all: true });