Tools for awaiting ready -- still can't make focus() work

ts/document.ts

@@ -1,15 +1,14 @@
-export function whenLoaded(callback: () => void) {
+import { waitForEvent } from "./event";
+
+export async function awaitLoaded() {
     if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", callback);
-    } else {
-        callback();
+        await waitForEvent(document, "DOMContentLoaded");
     }
 }
 
-export function addStyle(style: string) {
-    whenLoaded(() => {
-        addStyleNow(style);
-    });
+export async function addStyle(style: string) {
+    await awaitLoaded();
+    addStyleNow(style);
 }
 
 export function addStyleNow(style: string) {
@@ -17,3 +16,14 @@ export function addStyleNow(style: string) {
     sheet.replaceSync(style);
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
 }
+
+export async function awaitCustomElements() {
+    await Promise.allSettled([
+        customElements.whenDefined("sl-card"),
+        customElements.whenDefined("sl-icon"),
+        customElements.whenDefined("sl-input"),
+        customElements.whenDefined("sl-tab"),
+        customElements.whenDefined("sl-tab-group"),
+        customElements.whenDefined("sl-tab-panel"),
+    ]);
+}