manually register shoelace components

package.json

@@ -20,6 +20,7 @@
     "flexsearch": "^0.7.31",
     "keyword-mark-element": "^0.2.0",
     "lit": "^2.8.0",
+    "lodash": "^4.17.21",
     "marked": "^4.0.10",
     "mime-types": "^2.1.32",
     "minimist": "^1.2.5",
@@ -34,6 +35,7 @@
   "devDependencies": {
     "@playwright/test": "^1.38.1",
     "@types/flexsearch": "^0.7.3",
+    "@types/lodash": "^4.17.5",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
     "copy-webpack-plugin": "^9.0.1",

src/shoelace.ts

@@ -1,8 +1,30 @@
-// Cherry-picked Shoelace components:
-import "@shoelace-style/shoelace/dist/components/alert/alert.js";
-import "@shoelace-style/shoelace/dist/components/button/button.js";
-import "@shoelace-style/shoelace/dist/components/copy-button/copy-button.js";
-import "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
-import "@shoelace-style/shoelace/dist/components/dropdown/dropdown.js";
-import "@shoelace-style/shoelace/dist/components/menu/menu.js";
-import "@shoelace-style/shoelace/dist/components/menu-item/menu-item.js";
+import kebabCase from "lodash/fp/kebabCase";
+
+// Cherry-picked Shoelace components
+// Import .component and register manually to avoid name collision
+// See https://github.com/shoelace-style/shoelace/issues/705
+import SlAlert from "@shoelace-style/shoelace/dist/components/alert/alert.component.js";
+import SlButton from "@shoelace-style/shoelace/dist/components/button/button.component.js";
+import SlCopyButton from "@shoelace-style/shoelace/dist/components/copy-button/copy-button.component.js";
+import SlDialog from "@shoelace-style/shoelace/dist/components/dialog/dialog.component.js";
+import SlDropdown from "@shoelace-style/shoelace/dist/components/dropdown/dropdown.component.js";
+import SlMenu from "@shoelace-style/shoelace/dist/components/menu/menu.component.js";
+import SlMenuItem from "@shoelace-style/shoelace/dist/components/menu-item/menu-item.component.js";
+
+// Shoelace components should only be registered if needed
+// to prevent issues with callers, e.g. Browsertrix.
+[
+  SlAlert,
+  SlButton,
+  SlCopyButton,
+  SlDialog,
+  SlDropdown,
+  SlMenu,
+  SlMenuItem,
+].forEach((slClass) => {
+  const name = kebabCase(slClass.name);
+
+  if (!customElements.get(name)) {
+    customElements.define(name, slClass);
+  }
+});

yarn.lock

@@ -647,6 +647,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/lodash@^4.17.5":
+  version "4.17.5"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.5.tgz#e6c29b58e66995d57cd170ce3e2a61926d55ee04"
+  integrity sha512-MBIOHVZqVqgfro1euRDWX7OO0fBVUUMrN6Pwm8LQsz8cWhEpihlvR70ENj3f40j58TNxZaWv2ndSkInykNBBJw==
+
 "@types/mime@*":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"
@@ -3664,7 +3669,7 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-lodash@^4.17.14, lodash@^4.17.15:
+lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==