Rule proposal: `prefer-scoped-selector`

Many people don’t know the Element.querySelector() and Element.querySelectorAll() behaves differently than most common JavaScript DOM libraries, details.

Got the idea here

Fail

const inner = element.querySelectorAll('.outer .inner');

Pass

const inner = document.querySelectorAll('.outer .inner');

const inner = element.querySelectorAll(':scope .outer .inner');

---

I’m not sure about these, they are never going to get wrong result.

const inner = element.querySelectorAll('.a');

const inner = element.querySelectorAll('.a + .b');

Should we enforce them consistently, or only check descendant combinator and child combinator?

[fregante]

require a compliant CSS selector parser

Probably not, as it just has to trigger if it lacks \b:scope\b, which isn’t exactly common. Even if it finds it, it would be a false positive (i.e. no report) so it’s less annoying.

[sindresorhus]

This is accepted.