wait for loading customElements according to shoelace docs

ykrods · May 27, 2024 · 2278717 · 2278717
1 parent 6f4693f
commit 2278717
Showing 1 changed file with 39 additions and 27 deletions.
diff --git a/src/pages/FormBasic.svelte b/src/pages/FormBasic.svelte
@@ -10,6 +10,16 @@
   let alert;
   let alertText = '';
 
+  function readyForCustomElements() {
+    return Promise.all([
+      customElements.whenDefined('sl-button'),
+      customElements.whenDefined('sl-checkbox'),
+      customElements.whenDefined('sl-input'),
+      customElements.whenDefined('sl-option'),
+      customElements.whenDefined('sl-select')
+    ]);
+  }
+
   function onSubmit(evt) {
     console.log(evt);
     const formData = new FormData(evt.target);
@@ -26,33 +36,35 @@
 <div class="content">
   <h1>Form - basic</h1>
 
-  <form class="attention-error" on:submit|preventDefault={onSubmit}>
-    <sl-input
-      name="name"
-      type="text"
-      label="Name"
-      required
-      maxlength="10"
-      help-text="Input your name, Maximum length: 10 characters."
-    ></sl-input>
-    <br>
-    <sl-select
-      name="favorite"
-      label="Select your favorite"
-      clearable
-      required
-    >
-      <sl-option value="birds">Birds</sl-option>
-      <sl-option value="cats">Cats</sl-option>
-      <sl-option value="dogs">Dogs</sl-option>
-    </sl-select>
-    <br>
-    <sl-checkbox name="agree" value="yes" required>
-      I totally agree
-    </sl-checkbox>
-    <br><br>
-    <sl-button type="submit" variant="primary">Submit</sl-button>
-  </form>
+  {#await readyForCustomElements() then }
+    <form class="attention-error" on:submit|preventDefault={onSubmit}>
+      <sl-input
+        name="name"
+        type="text"
+        label="Name"
+        required
+        maxlength="10"
+        help-text="Input your name, Maximum length: 10 characters."
+      ></sl-input>
+      <br>
+      <sl-select
+        name="favorite"
+        label="Select your favorite"
+        clearable
+        required
+      >
+        <sl-option value="birds">Birds</sl-option>
+        <sl-option value="cats">Cats</sl-option>
+        <sl-option value="dogs">Dogs</sl-option>
+      </sl-select>
+      <br>
+      <sl-checkbox name="agree" value="yes" required>
+        I totally agree
+      </sl-checkbox>
+      <br><br>
+      <sl-button type="submit" variant="primary">Submit</sl-button>
+    </form>
+  {/await}
 
   <sl-alert type="success" duration=3000 closable bind:this={alert}>
     <sl-icon slot="icon" name="check2-circle"></sl-icon>