add autoloader to docs

2023-02-22 14:18:36 -05:00 · 2023-02-22 14:18:36 -05:00 · 9c573fb454
commit 9c573fb454
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@ -8,6 +8,17 @@ html {
  box-sizing: inherit;
 }

+/* Show custom elements only after they're registered */
+:not(:defined),
+:not(:defined) * {
+  opacity: 0;
+}
+
+:defined {
+  opacity: 1;
+  transition: 0.1s opacity;
+}
+
 body {
  font-family: var(--sl-font-sans);
  font-size: var(--sl-font-size-medium);
--- a/docs/index.html
+++ b/docs/index.html
@ -39,9 +39,9 @@
    <!-- Import Shoelace -->
    <link rel="stylesheet" href="/dist/themes/light.css" />
    <link rel="stylesheet" href="/dist/themes/dark.css" />
-    <script type="module" src="/dist/shoelace.js"></script>
+    <script type="module" src="/dist/shoelace-autoloader.js"></script>
  </head>
-  <body data-shoelace="/dist">
+  <body>
    <div id="app"></div>
    <script>
      // Set the initial theme to prevent flashing