try registering without anonymous classes first (#2079)

* try registering without anonymous classes first

* Add comment

* Add comment

* Add changelog note

* prettier

docs/pages/resources/changelog.md

@@ -14,6 +14,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 ## Next
 
+- When calling `customElements.define` we no longer register with anonymous classes by default [#2079]
 - `<sl-tab>` `closable` property now reflects. [#2041]
 - `<sl-tab-group>` now implements a proper "roving tabindex" and `<sl-tab>` is no longer tabbable by default. This aligns closer to the APG pattern for tabs. [#2041]
 - Fixed a bug in the submenu controller that prevented submenus from rendering in RTL without explicitly setting `dir` on the parent menu item [#1992]

src/internal/shoelace-element.ts

@@ -104,7 +104,15 @@ export default class ShoelaceElement extends LitElement {
       | typeof ShoelaceElement;
 
     if (!currentlyRegisteredConstructor) {
-      customElements.define(name, class extends elementConstructor {} as unknown as CustomElementConstructor, options);
+      // We try to register as the actual class first. If for some reason that fails, we fall back to anonymous classes.
+      // customElements can only have 1 class of the same "object id" per registry, so that is why the try {} catch {} exists.
+      // Some tools like Jest Snapshots and if you import the constructor and call `new SlButton()` they will fail with
+      //   the anonymous class version.
+      try {
+        customElements.define(name, elementConstructor, options);
+      } catch (_err) {
+        customElements.define(name, class extends elementConstructor {}, options);
+      }
       return;
     }