[whatwg/dom] Element.matches and :scope (Issue #1081)

Currently, the css selector `:scope` matches the element itself (spec: https://dom.spec.whatwg.org/#ref-for-dom-element-matches%E2%91%A0), for the `.matches` method.

However, usually, we use `:scope` to match a parent element and select for example its direct descendants. 

```js
document.body.querySelectorAll(':scope > *')
```

Sadly with the current matches `.matches`  definition we cannot reproduce a similar behavior.

```js
document.body.children[0].matches(':scope > *'); // because we can't supply the ':scope' node, the selector will always return false
```

So we can't "reverse" `querySelector` with `matches`:

```js
const childNode = parentNode.querySelector(':scope > *');
childNode.matches(':scope > *'); // false => :'(
```

I suggest, that we could update the `.matches`  definition to accept a specific ':scope'  as second parameter:

```ts
interface ElementMatchesOptions {
  scope?: ParentNode; // by default this values is set to the Element itself
}

interface Element {
  matches(
    selector: string,
    options?: ElementMatchesOptions,
  ): boolean;
}
```

The update definition is subject to discussion/modification, here it's juste an example.

So we could have:

```js
const childNode = parentNode.querySelector(':scope > *');
childNode.matches(':scope > *', { scope: parentNode }); // true => works !
```

What do you think guys ?

-- 
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/1081
You are receiving this because you are subscribed to this thread.

Message ID: <whatwg/dom/issues/1081@github.com>