prototype: scoped elements

package-lock.json

@@ -17,8 +17,7 @@
         "@shoelace-style/localize": "^3.1.1",
         "composed-offset-position": "^0.0.4",
         "lit": "^2.7.5",
-        "qr-creator": "^1.0.0",
-        "web-component-define": "^2.0.10"
+        "qr-creator": "^1.0.0"
       },
       "devDependencies": {
         "@11ty/eleventy": "^2.0.1",
@@ -16744,15 +16743,6 @@
         "defaults": "^1.0.3"
       }
     },
-    "node_modules/web-component-define": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/web-component-define/-/web-component-define-2.0.10.tgz",
-      "integrity": "sha512-gwkjTFdG8eE8fxI4+RZUCQRy06SSSkCyLpQ1YSCsA+z8ZLlnmqLX/3B3WD2ZraVRtyje3hLXS8bxL8CK1/bZYQ==",
-      "dependencies": {
-        "@lit/reactive-element": "^1.6.1",
-        "@open-wc/dedupe-mixin": "^1.3.1"
-      }
-    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -29906,15 +29896,6 @@
         "defaults": "^1.0.3"
       }
     },
-    "web-component-define": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/web-component-define/-/web-component-define-2.0.10.tgz",
-      "integrity": "sha512-gwkjTFdG8eE8fxI4+RZUCQRy06SSSkCyLpQ1YSCsA+z8ZLlnmqLX/3B3WD2ZraVRtyje3hLXS8bxL8CK1/bZYQ==",
-      "requires": {
-        "@lit/reactive-element": "^1.6.1",
-        "@open-wc/dedupe-mixin": "^1.3.1"
-      }
-    },
     "webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",

package.json

@@ -72,8 +72,7 @@
     "@shoelace-style/localize": "^3.1.1",
     "composed-offset-position": "^0.0.4",
     "lit": "^2.7.5",
-    "qr-creator": "^1.0.0",
-    "web-component-define": "^2.0.10"
+    "qr-creator": "^1.0.0"
   },
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",

src/components/alert/alert.component.ts

@@ -1,17 +1,16 @@
-import '../icon-button/icon-button';
 import { animateTo, stopAnimations } from '../../internal/animate';
 import { classMap } from 'lit/directives/class-map.js';
-import { property, query } from 'lit/decorators.js';
 import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
 import { HasSlotController } from '../../internal/slot';
 import { html } from 'lit';
 import { LocalizeController } from '../../utilities/localize';
+import { property, query } from 'lit/decorators.js';
 import { waitForEvent } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import ShoelaceElement from '../../internal/shoelace-element';
+import SlIconButton from '../icon-button/icon-button';
 import styles from './alert.styles';
 import type { CSSResultGroup } from 'lit';
-import SlIconButton from '../icon-button/icon-button';
 
 const toastStack = Object.assign(document.createElement('div'), { className: 'sl-toast-stack' });
 
@@ -43,10 +42,10 @@ const toastStack = Object.assign(document.createElement('div'), { className: 'sl
 export default class SlAlert extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
 
-  static get scopedElements () {
+  static get scopedElements() {
     return {
       'sl-icon-button': SlIconButton
-    }
+    };
   }
 
   private autoHideTimeout: number;

src/components/alert/alert.ts

@@ -1,5 +1,5 @@
-import SlAlert from "./alert.component"
-export * from "./alert.component"
+import SlAlert from './alert.component';
+export * from './alert.component';
 
-export default SlAlert
-window.customElements.define("sl-alert", SlAlert)
+export default SlAlert;
+window.customElements.define('sl-alert', SlAlert);

src/components/animated-image/animated-image.ts

@@ -1,11 +1,10 @@
-import '../icon/icon';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { html } from 'lit';
 import { watch } from '../../internal/watch';
 import ShoelaceElement from '../../internal/shoelace-element';
+import SlIcon from '../icon/icon';
 import styles from './animated-image.styles';
 import type { CSSResultGroup } from 'lit';
-import SlIcon from '../icon/icon';
 
 /**
  * @summary A component for displaying animated GIFs and WEBPs that play and pause on interaction.
@@ -31,7 +30,7 @@ export default class SlAnimatedImage extends ShoelaceElement {
   static styles: CSSResultGroup = styles;
   static scopedElements = {
     'sl-icon': SlIcon
-  }
+  };
 
   @query('.animated-image__animated') animatedImage: HTMLImageElement;
 

src/internal/shoelace-element.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { ScopedElementsMixin } from "@open-wc/scoped-elements"
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 
 // Match event type name strings that are registered on GlobalEventHandlersEventMap...
 type EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap
@@ -68,7 +68,7 @@ export default class ShoelaceElement extends ScopedElementsMixin(LitElement) {
   @property() dir: string;
   @property() lang: string;
 
-  static scopedElements: Record<string, typeof LitElement>
+  static scopedElements: Record<string, typeof LitElement>;
 
   /** Emits a custom event with more convenient defaults. */
   emit<T extends string & keyof EventTypesWithoutRequiredDetail>(