refactor: improve the typing of template refs

Author: rocwang

src/Grid.vue

@@ -76,19 +76,19 @@ export default defineComponent({
     // endregion
 
     // region: refs
-    const rootRef = ref<HTMLElement>(document.createElement("div"));
-    const probeRef = ref<HTMLElement>(document.createElement("div"));
+    const rootRef = ref<Element>(document.createElement("div"));
+    const probeRef = ref<Element>(document.createElement("div"));
     // endregion
 
     // region: rendering triggers
     // a stream of root elements when scrolling
     // @ts-expect-error Rxjs has a typing bug on fromEvent() with resultSelector
     // which is fixed in https://github.com/ReactiveX/rxjs/pull/6447
-    const scroll$: Observable<HTMLElement> = fromEventPattern(onMounted).pipe(
+    const scroll$: Observable<Element> = fromEventPattern(onMounted).pipe(
       // use share() to push the "mounted" event from vue, instead of pulling:
       share(),
       switchMapTo(
-        fromEvent<UIEvent, HTMLElement>(
+        fromEvent<UIEvent, Element>(
           window,
           "scroll",
           {

src/pipeline.ts

@@ -225,7 +225,7 @@ export function pipeline(
   pageProvider$: Observable<PageProvider>,
   pageSize$: Observable<number>,
   rootResize$: Observable<Element>,
-  scroll$: Observable<HTMLElement>
+  scroll$: Observable<Element>
 ): PipelineOutput {
   // region: measurements of the visual grid
   const heightAboveWindow$: Observable<number> = merge(