Updates QueriedElement to support ShadowRoot roots.

`el.shadowRoot.querySelector` uses a `ShadowRoot` as the root of the query, not an `Element` so we should support that. The behavior of `:scope` seems to be a little weird, but Chrome also returns `null` when used in a shadow root. This [csswg issue](w3c/csswg-drafts#7261) has some ambiguity, but it seems that because browsers don't see shadow roots as elements, `querySelector` can't return the `ShadowRoot`. I think the best behavior we can do is just type `null`.

src/query.test.ts

@@ -30,6 +30,10 @@ describe('query', () => {
       const _el: QueriedElement<':scope'> = {} as Element;
     });
 
+    typeTest('resolve `:scope` to `null` for `ShadowRoot`', () => {
+      const _el: QueriedElement<':scope', ShadowRoot> = null;
+    });
+
     typeTest('resolves a tag name with class', () => {
       const _el: HTMLInputElement = {} as QueriedElement<'input.clazz'>;
     });
@@ -117,6 +121,10 @@ describe('query', () => {
     typeTest('resolves queries without a tag name to `Element`', () => {
       const _el: QueriedElement<'.foo'> = {} as Element;
     });
+
+    typeTest('resolves queries from a `ShadowRoot`', () => {
+      const _el: QueriedElement<'input', ShadowRoot> = {} as HTMLInputElement;
+    });
   });
 });
 

src/query.ts

@@ -8,15 +8,17 @@
  * return.
  *
  * @param Query The selector query to resolve.
- * @param Host The host element making the query.
+ * @param Root The root element or shadow root making the query.
  * @returns A union of all possible {@link Element} objects which may be
  *     returned by the query.
  */
 export type QueriedElement<
   Query extends string,
-  Host extends Element = Element,
+  Root extends Element | ShadowRoot = Element,
 > = Query extends ':scope'
-    ? Host
+    ? Root extends Element
+        ? Root
+        : null
     : Union<ElementsOf<TagNames<Selectors<Query>>>>
 ;