@bodil/dom 0.1.0

package/dist/geometry.js

@@ -0,0 +1,117 @@
+function rectFor(value) {
+    const bounds = value instanceof Element ? value.getBoundingClientRect() : value;
+    return new DOMRect(roundByDPR(bounds.x), roundByDPR(bounds.y), roundByDPR(bounds.width), roundByDPR(bounds.height));
+}
+function rectPoints(rect) {
+    return [
+        DOMPoint.fromPoint({ x: rect.left, y: rect.top }),
+        DOMPoint.fromPoint({ x: rect.right, y: rect.top }),
+        DOMPoint.fromPoint({ x: rect.right, y: rect.bottom }),
+        DOMPoint.fromPoint({ x: rect.left, y: rect.bottom }),
+    ];
+}
+function normalsIntersect(left1, right1, y1, x2, top2, bottom2) {
+    return left1 <= x2 && right1 >= x2 && top2 <= y1 && bottom2 >= y1;
+}
+/**
+ * Test whether the rectangle `inner` is fully contained inside the rectangle
+ * `outer`.
+ */
+export function contains(inner, outer) {
+    const a = rectFor(inner), b = rectFor(outer);
+    return a.top >= b.top && a.bottom <= b.bottom && a.left >= b.left && a.right <= b.right;
+}
+/**
+ * Test whether the point `p` lies inside the rectangle `rect`.
+ */
+export function containsPoint(p, rect) {
+    const r = rectFor(rect);
+    return p.x >= r.left && p.x <= r.right && p.y >= r.top && p.y <= r.bottom;
+}
+/**
+ * Test whether the rectangles `rectA` and `rectB` intersect.
+ */
+export function intersects(rectA, rectB) {
+    const a = rectFor(rectA), b = rectFor(rectB);
+    // For each of the two horizontal edges in each rectangle, check if they
+    // intersect with any of the two vertical edges in the opposite rectangle.
+    // If no edges intersect, we check to see if any of the four corner points
+    // of each rectangle lies inside the other rectangle. If none of these
+    // conditions are true, the rectangles don't intersect.
+    return (normalsIntersect(a.left, a.right, a.top, b.left, b.top, b.bottom) ||
+        normalsIntersect(a.left, a.right, a.bottom, b.left, b.top, b.bottom) ||
+        normalsIntersect(a.left, a.right, a.top, b.right, b.top, b.bottom) ||
+        normalsIntersect(a.left, a.right, a.bottom, b.right, b.top, b.bottom) ||
+        normalsIntersect(b.left, b.right, b.top, a.left, a.top, a.bottom) ||
+        normalsIntersect(b.left, b.right, b.bottom, a.left, a.top, a.bottom) ||
+        normalsIntersect(b.left, b.right, b.top, a.right, a.top, a.bottom) ||
+        normalsIntersect(b.left, b.right, b.bottom, a.right, a.top, a.bottom) ||
+        rectPoints(a).some((p) => containsPoint(p, b)) ||
+        rectPoints(b).some((p) => containsPoint(p, a)));
+}
+/**
+ * Test if a rectangle intersects with a given Y coordinate bound.
+ */
+export function intersectsHeightRange(rect, top, bottom) {
+    const r = rectFor(rect);
+    return r.bottom >= top && r.top <= bottom;
+}
+/**
+ * Test if a rectangle intersects with a given Y coordinate.
+ */
+export function intersectsHeight(rect, y, margin = 0) {
+    return intersectsHeightRange(rect, y - margin, y + margin);
+}
+/**
+ * Test if a rectangle lies fully within a given Y coordinate bound.
+ */
+export function containsHeightRange(rect, top, bottom) {
+    const r = rectFor(rect);
+    return r.top >= top && r.bottom <= bottom;
+}
+/**
+ * Decide how much of a rectangle lies within a given Y coordinate bound.
+ * Returns a value between 0 and 1.
+ */
+export function containsHeightRatio(rect, top, bottom) {
+    const r = rectFor(rect);
+    if (r.bottom < top || r.top > bottom) {
+        return 0;
+    }
+    if (r.top >= top && r.bottom <= bottom) {
+        return 1;
+    }
+    if (r.top < top) {
+        return (r.bottom - top) / r.height;
+    }
+    else if (r.bottom > bottom) {
+        return (bottom - r.top) / r.height;
+    }
+    throw new Error("unexpected fallthrough case in containsHeightRatio()");
+}
+/**
+ * Return a {@link DOMRect} that is aligned inside `outer` while preserving the
+ * aspect ratio of `inner`.
+ */
+export function fitRect(inner, outer) {
+    if (inner.width / inner.height < outer.width / outer.height) {
+        // portrait
+        const scale = outer.height / inner.height;
+        const targetWidth = inner.width * scale;
+        return new DOMRect(outer.width / 2 - targetWidth / 2, 0, targetWidth, outer.height);
+    }
+    // landscape
+    const scale = outer.width / inner.width;
+    const targetHeight = inner.height * scale;
+    return new DOMRect(0, outer.height / 2 - targetHeight / 2, outer.width, targetHeight);
+}
+/**
+ * Round a value to the window's device pixel ratio.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
+ */
+export function roundByDPR(value) {
+    const dpr = window.devicePixelRatio || 1;
+    return Math.round(value * dpr) / dpr;
+}
+//# sourceMappingURL=geometry.js.map

package/dist/geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.js","sourceRoot":"","sources":["../src/geometry.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * DOM and web component tools.
+ * @module
+ */
+import * as component from "./component";
+import * as css from "./css";
+import * as dom from "./dom";
+import * as event from "./event";
+import * as geometry from "./geometry";
+export { component, css, dom, event, geometry };

package/dist/index.js

@@ -0,0 +1,11 @@
+/**
+ * DOM and web component tools.
+ * @module
+ */
+import * as component from "./component";
+import * as css from "./css";
+import * as dom from "./dom";
+import * as event from "./event";
+import * as geometry from "./geometry";
+export { component, css, dom, event, geometry };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,SAAS,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,GAAG,MAAM,OAAO,CAAC;AAC7B,OAAO,KAAK,GAAG,MAAM,OAAO,CAAC;AAC7B,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC"}

package/dist/scheduler.d.ts

@@ -0,0 +1,2 @@
+import type { Component } from "./component";
+export declare function scheduler(component: Component): void;

package/dist/scheduler.js

@@ -0,0 +1,54 @@
+import { DisposableContext, timeout } from "@bodil/core/disposable";
+import { animationFrame } from "./dom";
+const MAX_BATCH_TIME = 1000 / 15; // 30fps
+const MIN_JOBS_PER_BATCH = 32;
+let schedulerRequested = false;
+const scheduledJobs = new Set();
+const schedulerContext = new DisposableContext();
+function shiftSet(set) {
+    const result = set[Symbol.iterator]().next();
+    if (result.done === true) {
+        return undefined;
+    }
+    const item = result.value;
+    set.delete(item);
+    return item;
+}
+function runScheduler() {
+    schedulerContext.dispose();
+    const startTime = performance.now();
+    let count = 0;
+    let item;
+    while ((item = shiftSet(scheduledJobs)) !== undefined) {
+        count += 1;
+        try {
+            item.performUpdate();
+        }
+        catch (e) {
+            // eslint-disable-next-line no-console
+            console.error("error while updating:", e);
+        }
+        const elapsedTime = performance.now() - startTime;
+        if (elapsedTime > MAX_BATCH_TIME && count >= MIN_JOBS_PER_BATCH) {
+            break;
+        }
+    }
+    if (scheduledJobs.size > 0) {
+        startScheduler();
+    }
+    else {
+        schedulerRequested = false;
+    }
+}
+function startScheduler() {
+    schedulerContext.use(animationFrame(runScheduler));
+    schedulerContext.use(timeout(runScheduler, 1000));
+}
+export function scheduler(component) {
+    scheduledJobs.add(component);
+    if (!schedulerRequested) {
+        schedulerRequested = true;
+        startScheduler();
+    }
+}
+//# sourceMappingURL=scheduler.js.map

package/dist/scheduler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scheduler.js","sourceRoot":"","sources":["../src/scheduler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGpE,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,cAAc,GAAW,IAAI,GAAG,EAAE,CAAC,CAAC,QAAQ;AAClD,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAC9B,IAAI,kBAAkB,GAAG,KAAK,CAAC;AAC/B,MAAM,aAAa,GAAG,IAAI,GAAG,EAAa,CAAC;AAC3C,MAAM,gBAAgB,GAAG,IAAI,iBAAiB,EAAE,CAAC;AAEjD,SAAS,QAAQ,CAAI,GAAW;IAC5B,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;IAC7C,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,EAAE,CAAC;QACvB,OAAO,SAAS,CAAC;IACrB,CAAC;IACD,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC;IAC1B,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACjB,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,SAAS,YAAY;IACjB,gBAAgB,CAAC,OAAO,EAAE,CAAC;IAC3B,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC;IACpC,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,IAAI,IAAI,CAAC;IACT,OAAO,CAAC,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC,KAAK,SAAS,EAAE,CAAC;QACpD,KAAK,IAAI,CAAC,CAAC;QACX,IAAI,CAAC;YACA,IAA6C,CAAC,aAAa,EAAE,CAAC;QACnE,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACT,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,CAAC,CAAC,CAAC;QAC9C,CAAC;QACD,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,GAAG,SAAS,CAAC;QAClD,IAAI,WAAW,GAAG,cAAc,IAAI,KAAK,IAAI,kBAAkB,EAAE,CAAC;YAC9D,MAAM;QACV,CAAC;IACL,CAAC;IACD,IAAI,aAAa,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC;QACzB,cAAc,EAAE,CAAC;IACrB,CAAC;SAAM,CAAC;QACJ,kBAAkB,GAAG,KAAK,CAAC;IAC/B,CAAC;AACL,CAAC;AAED,SAAS,cAAc;IACnB,gBAAgB,CAAC,GAAG,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC;IACnD,gBAAgB,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC;AACtD,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,SAAoB;IAC1C,aAAa,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAC7B,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACtB,kBAAkB,GAAG,IAAI,CAAC;QAC1B,cAAc,EAAE,CAAC;IACrB,CAAC;AACL,CAAC"}

package/dist/slot.d.ts

@@ -0,0 +1,31 @@
+import type { Signal } from "@bodil/signal";
+import type { ReactiveController } from "lit";
+import type { Constructor } from "type-fest";
+import type { Component } from "./component";
+export interface QuerySlotOptions extends AssignedNodesOptions {
+    /** The name of the slot to query, or `undefined` for the default slot. */
+    slot?: string;
+    /** Whether to include all nodes instead of just elements. */
+    nodes?: boolean;
+    /** A CSS selector to filter by. */
+    selector?: string;
+    /** A class constructor to filter by, eg. `instanceOf: HTMLDivElement` */
+    instanceOf?: Constructor<unknown>;
+    /** Create a signal which will update with changes to the slot's contents. */
+    reactive?: boolean;
+}
+export declare function findSlot(root: Component, slot: string | undefined): HTMLSlotElement | null;
+export declare class SlotChangeController implements ReactiveController {
+    private readonly host;
+    private readonly slot;
+    private readonly sig;
+    private readonly query;
+    private readonly context;
+    constructor(host: Component, slot: string | undefined, sig: Signal.State<Array<Node>>, query: (slot: HTMLSlotElement) => Array<Node>);
+    updateSlot(slot: HTMLSlotElement): void;
+    hostDisconnected(): void;
+    hostConnected(): void;
+    hostUpdated(): void;
+}
+export declare function getOrSetQuery<A>(obj: object, options: QuerySlotOptions, create: () => A): A;
+export declare function getOrSetSignal<A>(obj: object, query: unknown, create: () => A): A;

package/dist/slot.js

@@ -0,0 +1,67 @@
+import { DisposableContext } from "@bodil/core/disposable";
+import { eventListener } from "./event";
+export function findSlot(root, slot) {
+    const slotSelector = `slot${slot !== undefined ? `[name=${slot}]` : ":not([name])"}`;
+    return root.renderRoot.querySelector(slotSelector);
+}
+export class SlotChangeController {
+    constructor(host, slot, sig, query) {
+        this.host = host;
+        this.slot = slot;
+        this.sig = sig;
+        this.query = query;
+        this.context = new DisposableContext();
+    }
+    updateSlot(slot) {
+        this.sig.set(this.query(slot));
+    }
+    hostDisconnected() {
+        this.context.dispose();
+    }
+    hostConnected() {
+        this.hostUpdated();
+    }
+    hostUpdated() {
+        this.context.dispose();
+        const slot = findSlot(this.host, this.slot);
+        if (slot !== null) {
+            this.context.use(eventListener(slot, "slotchange", this.updateSlot.bind(this, slot)));
+            this.updateSlot(slot);
+        }
+    }
+}
+const queryCache = new WeakMap();
+export function getOrSetQuery(obj, options, create) {
+    let stringCache = queryCache.get(obj);
+    if (stringCache === undefined) {
+        stringCache = new Map();
+        queryCache.set(obj, stringCache);
+    }
+    const key = `query:${options.selector ?? ""}:${options.nodes ?? false}:${options.flatten ?? false}`;
+    let constructorCache = stringCache.get(key);
+    if (constructorCache === undefined) {
+        constructorCache = new Map();
+        stringCache.set(key, constructorCache);
+    }
+    let query = constructorCache.get(options.instanceOf);
+    if (query === undefined) {
+        query = create();
+        constructorCache.set(options.instanceOf, query);
+    }
+    return query;
+}
+const signalCache = new WeakMap();
+export function getOrSetSignal(obj, query, create) {
+    let innerCache = signalCache.get(obj);
+    if (innerCache === undefined) {
+        innerCache = new Map();
+        signalCache.set(obj, innerCache);
+    }
+    let signal = innerCache.get(query);
+    if (signal === undefined) {
+        signal = create();
+        innerCache.set(query, signal);
+    }
+    return signal;
+}
+//# sourceMappingURL=slot.js.map

package/dist/slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot.js","sourceRoot":"","sources":["../src/slot.ts"],"names":[],"mappings":"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"}

package/dist/test-global.js

@@ -0,0 +1,5 @@
+"use strict";
+// Shut up, Wesley! https://github.com/lit/lit/issues/4877
+globalThis.litIssuedWarnings ??= new Set();
+globalThis.litIssuedWarnings.add("Lit is in dev mode. Not recommended for production! See https://lit.dev/msg/dev-mode for more information.");
+//# sourceMappingURL=test-global.js.map

package/dist/test-global.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-global.js","sourceRoot":"","sources":["../src/test-global.ts"],"names":[],"mappings":";AAAA,0DAA0D;AACzD,UAAkB,CAAC,iBAAiB,KAAK,IAAI,GAAG,EAAE,CAAC;AACnD,UAAkB,CAAC,iBAAiB,CAAC,GAAG,CACrC,4GAA4G,CAC/G,CAAC"}

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@bodil/dom",
+  "version": "0.1.0",
+  "description": "DOM and web component tools",
+  "homepage": "https://codeberg.org/bodil/dom",
+  "repository": {
+    "type": "git",
+    "url": "git+https://codeberg.org/bodil/dom.git"
+  },
+  "license": "EUPL-1.2+",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      }
+    },
+    "./component": {
+      "import": {
+        "types": "./dist/component.d.ts",
+        "import": "./dist/component.js"
+      }
+    },
+    "./css": {
+      "import": {
+        "types": "./dist/css.d.ts",
+        "import": "./dist/css.js"
+      }
+    },
+    "./dom": {
+      "import": {
+        "types": "./dist/dom.d.ts",
+        "import": "./dist/dom.js"
+      }
+    },
+    "./event": {
+      "import": {
+        "types": "./dist/event.d.ts",
+        "import": "./dist/event.js"
+      }
+    },
+    "./geometry": {
+      "import": {
+        "types": "./dist/geometry.d.ts",
+        "import": "./dist/geometry.js"
+      }
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@bodil/core": "^0.4.9",
+    "@bodil/opt": "^0.4.2",
+    "@bodil/signal": "^0.3.3",
+    "lit": "^3.3.1",
+    "type-fest": "^5.3.1"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.3.3",
+    "@eslint/js": "^9.39.2",
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
+    "@typescript-eslint/eslint-plugin": "^8.49.0",
+    "@typescript-eslint/parser": "^8.49.0",
+    "@vitest/coverage-v8": "^4.0.15",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jsdoc": "^54.7.0",
+    "globals": "^16.5.0",
+    "happy-dom": "^20.0.11",
+    "npm-run-all2": "^8.0.4",
+    "prettier": "^3.7.4",
+    "typedoc": "^0.28.15",
+    "typedoc-plugin-extras": "^4.0.1",
+    "typedoc-plugin-mdn-links": "^5.0.10",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.15"
+  },
+  "prettier": {
+    "editorconfig": true,
+    "plugins": [
+      "@ianvs/prettier-plugin-sort-imports"
+    ],
+    "importOrderParserPlugins": [
+      "typescript",
+      "decorators"
+    ],
+    "importOrderTypeScriptVersion": "5.0.0",
+    "importOrder": [
+      "",
+      "<BUILTIN_MODULES>",
+      "",
+      "<THIRD_PARTY_MODULES>",
+      "",
+      "^[.](?!.*[?]inline$)",
+      "",
+      "[?]inline$"
+    ]
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest --run",
+    "check:eslint": "eslint src",
+    "check:tsc": "tsc --noEmit",
+    "check": "run-p check:tsc check:eslint",
+    "doc": "typedoc",
+    "doc:readthedocs": "typedoc --out $READTHEDOCS_OUTPUT/html",
+    "prepublish": "tsc"
+  }
+}

package/src/component.test.ts

@@ -0,0 +1,90 @@
+import type { Signal } from "@bodil/signal";
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { expect, expectTypeOf, test } from "vitest";
+
+import { Component } from "./component";
+
+test("Component.query", async () => {
+    @customElement("query-test-class")
+    class QueryTestClass extends Component {
+        div = createRef<HTMLDivElement>();
+        p = createRef<HTMLParagraphElement>();
+        render() {
+            return html`<div ${ref(this.div)} class="welp"></div>
+                <p ${ref(this.p)} class="welp"></p>`;
+        }
+    }
+
+    const t = document.createElement("query-test-class") as QueryTestClass;
+    document.body.append(t);
+    await t.updateComplete;
+
+    expect(t.query("div")).toBe(t.div.value);
+    expectTypeOf(t.query("div")).toEqualTypeOf<HTMLDivElement | null>();
+    expect(t.query("p")).toBe(t.p.value);
+    expectTypeOf(t.query("p")).toEqualTypeOf<HTMLParagraphElement | null>();
+    expect(t.query(".welp")).toBe(t.div.value);
+    expectTypeOf(t.query(".welp")).toEqualTypeOf<Element | null>();
+
+    expect(Array.from(t.queryAll("div"))).deep.equal([t.div.value]);
+    expectTypeOf(t.queryAll("div")).toEqualTypeOf<NodeListOf<HTMLDivElement>>();
+    expect(Array.from(t.queryAll("p"))).deep.equal([t.p.value]);
+    expectTypeOf(t.queryAll("p")).toEqualTypeOf<NodeListOf<HTMLParagraphElement>>();
+    expect(Array.from(t.queryAll(".welp"))).deep.equal([t.div.value, t.p.value]);
+    expectTypeOf(t.queryAll(".welp")).toEqualTypeOf<NodeListOf<Element>>();
+});
+
+test("Component.querySlot", async () => {
+    @customElement("query-slot-test-class")
+    class QuerySlotTestClass extends Component {
+        render() {
+            return html`<slot></slot><slot name="fixes-the-bug"></slot>`;
+        }
+    }
+
+    const t = document.createElement("query-slot-test-class") as QuerySlotTestClass;
+    document.body.append(t);
+
+    const e = (cls: string, slot?: string) => {
+        const el = document.createElement("div");
+        el.classList.add(cls);
+        if (slot !== undefined) {
+            el.slot = slot;
+        }
+        t.append(el);
+        return el;
+    };
+
+    const joe = e("joe");
+    const mike = e("mike");
+    const robert = e("robert", "fixes-the-bug");
+
+    await t.updateComplete;
+
+    expect(t.querySlot()).deep.equal([joe, mike]);
+    expect(t.querySlot({ slot: "fixes-the-bug" })).deep.equal([robert]);
+
+    const slot = t.querySlot({ slot: "fixes-the-bug", reactive: true });
+    expectTypeOf(slot).toEqualTypeOf<Signal.Computed<Array<Element>>>();
+    expect(slot.get()).deep.equal([robert]);
+    joe.slot = "fixes-the-bug"; // for argument's sake
+    expect(slot.get()).deep.equal([joe, robert]);
+    expect(t.querySlot()).deep.equal([mike]);
+    robert.removeAttribute("slot");
+    expect(slot.get()).deep.equal([joe]);
+    expect(t.querySlot()).deep.equal([mike, robert]);
+
+    const divsByInstance = t.querySlot({ instanceOf: HTMLDivElement });
+    expectTypeOf(divsByInstance).toEqualTypeOf<Array<HTMLDivElement>>();
+    expect(divsByInstance).deep.equal([mike, robert]);
+
+    const divsBySelector = t.querySlot({ selector: "div" });
+    expectTypeOf(divsBySelector).toEqualTypeOf<Array<HTMLDivElement>>();
+    expect(divsBySelector).deep.equal([mike, robert]);
+
+    expect(t.querySlot({ selector: "div.robert" })).deep.equal([robert]);
+
+    expectTypeOf(t.querySlot({ nodes: true })).toEqualTypeOf<Array<Node>>();
+});