2 files changed, 23 insertions, 6 deletions
diff --git a/examples/snowpack/astro/components/Nav.astro b/examples/snowpack/astro/components/Nav.astro
index d2c0e943c..0c97dd425 100644
--- a/examples/snowpack/astro/components/Nav.astro
+++ b/examples/snowpack/astro/components/Nav.astro
@@ -123,6 +123,10 @@ export let version: string = '3.1.2';
       flex-grow: 1;
     }
 
+    > :global(.algolia-autocomplete) {
+      width: 100%;
+    }
+
     @media (min-width: $breakpoint-m) {
       max-width: 600px;
     }
@@ -344,9 +348,5 @@ export let version: string = '3.1.2';
     }
   };
 </script>
-<script type="module" defer>
-  import docsearch from 'https://cdn.skypack.dev/docsearch.js/dist/cdn/docsearch.min.js';
-  docsearch({
-    apiKey: '562139304880b94536fc53f5d65c5c19', indexName: 'snowpack', inputSelector: '#search-form-input', debug: true // Set debug to true if you want to inspect the dropdown
-  });
-</script>
+<script type="module" src="./docsearch.js"></script>
+<doc-search api-key="562139304880b94536fc53f5d65c5c19" selector="#search-form-input"></doc-search>
diff --git a/examples/snowpack/astro/components/docsearch.js b/examples/snowpack/astro/components/docsearch.js
new file mode 100644
index 000000000..d7ae95f30
--- /dev/null
+++ b/examples/snowpack/astro/components/docsearch.js
@@ -0,0 +1,17 @@
+import docsearch from 'docsearch.js/dist/cdn/docsearch.min.js';
+
+customElements.define('doc-search', class extends HTMLElement {
+  connectedCallback() {
+    if(!this._setup) {
+      const apiKey = this.getAttribute('api-key');
+      const selector = this.getAttribute('selector');
+      docsearch({
+        apiKey: apiKey,
+        indexName: 'snowpack',
+        inputSelector: selector,
+        debug: true // Set debug to true if you want to inspect the dropdown
+      });
+      this._setup = true;
+    }
+  }
+});
+\ No newline at end of file