reenable autoregistration

docs/getting-started/changelog.md

@@ -6,14 +6,21 @@ Components with the <sl-badge type="warning" pill>Experimental</sl-badge> badge
 
 _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
 
-## Next
+## 2.0.0-beta.34
 
+This release changes the way components are registered if you're [cherry picking](/getting-started/installation?id=cherry-picking) or [using a bundler](/getting-started/installation?id=bundling). This recommendation came from the LitElement team and simplifies Shoelace's dependency graph. It also eliminates the need to call a `register()` function before using each component.
+
+From now on, importing a component will register it automatically. The caveat is that bundlers may not tree shake the library properly if you import from `@shoelace-style/shoelace`, so the recommendation is to import components and utilities from their corresponding files instead.
+
+- 🚨 BREAKING: removed `all.shoelace.js` (use `shoelace.js` instead)
+- 🚨 BREAKING: component modules now have a side effect, so bundlers may not tree shake properly when importing from `@shoelace-style/shoelace` (see the [installation page](/getting-started/installation?id=bundling) for more details and how to update)
 - Added `sl-clear` event to `sl-select`
 - Fixed a bug where dynamically changing menu items in `sl-select` would cause the display label to be blank [#374](https://github.com/shoelace-style/shoelace/discussions/374)
 - Fixed a bug where setting the `value` attribute or property on `sl-input` and `sl-textarea` would trigger validation too soon
 - Fixed the margin in `sl-menu-label` to align with menu items
 - Fixed `autofocus` attributes in `sl-input` and `sl-textarea`
 - Improved types for `autocapitalize` in `sl-input` and `sl-textarea`
+- Reverted the custom `@tag` decorator in favor of `@customElement` to enable auto-registration
 
 ## 2.0.0-beta.33
 

docs/getting-started/installation.md

@@ -8,7 +8,7 @@ The easiest way to install Shoelace is with the CDN. Just add the following tags
 
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/base.css">
-<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/all.shoelace.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
 ```
 
 Now you can [start using Shoelace!](/getting-started/usage.md)
@@ -27,14 +27,14 @@ Once you've done that, add the following tags to your page. Make sure to update
 
 ```html
 <link rel="stylesheet" href="/scripts/shoelace/dist/themes/base.css">
-<script type="module" src="/scripts/shoelace/dist/all.shoelace.js"></script>
+<script type="module" src="/scripts/shoelace/dist/shoelace.js"></script>
 ```
 
 ## Setting the Base Path
 
 Some components rely on assets (icons, images, etc.) and Shoelace needs to know where they're located. For convenience, Shoelace will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `shoelace.js` and will "just work" for most users.
 
-However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Shoelace, you'll need to set the base path. You can do this one of two ways. The following examples assume you're serving Shoelace's `dist` directory from `/scripts/shoelace`.
+However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Shoelace, you'll need to set the base path. You can do this one of two ways. The following example assumes you're serving Shoelace's `dist` directory from `/scripts/shoelace`.
 
 ```html
 <!-- Option 1: the data-shoelace attribute -->
@@ -56,7 +56,7 @@ The previous approach is the _easiest_ way to load Shoelace, but easy isn't alwa
 
 Cherry picking can be done from your local install or [directly from the CDN](https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/). This will limit the number of files the browser has to download and reduce the amount of bytes being transferred. The disadvantage is that you need to load and register each component manually, including its dependencies.
 
-Here's an example that loads only the button component and its dependencies.
+Here's an example that loads only the button component and its dependencies. Again, we're assuming you're serving Shoelace's `dist` directory from `/scripts/shoelace`.
 
 ```html
 <!-- The base stylesheet is always required -->
@@ -66,16 +66,15 @@ Here's an example that loads only the button component and its dependencies.
   import SlButton from '/scripts/shoelace/dist/components/button/button.js';
   import SlSpinner from '/scripts/shoelace/dist/components/spinner/spinner.js';
   
-  SlButton.register();
-  SlSpinner.register(); // spinner is a dependency of button
+  // <sl-button> and <sl-spinner> are ready to use!
 </script>
 ```
 
 If a component has dependencies, they'll be listed in the "Dependencies" section of its documentation. These are always Shoelace components, not third-party libraries. For example, `<sl-button>` requires you to load `<sl-spinner>` because it's used internally for its loading state.
 
-!> Never cherry pick from `all.shoelace.js` or `shoelace.js` as this will cause the browser to load the entire library. Instead, cherry pick from component modules as shown above.
+!> Never cherry pick components or utilities from `shoelace.js` as this will cause the browser to load the entire library. Instead, cherry pick from specific modules as shown above.
 
-!> You may see files named `chunk.[hash].js` in the `dist` directory. Never reference these files directly, as they change from version to version. Instead, import the corresponding component or utility file.
+!> You will see files named `chunk.[hash].js` in the `chunks` directory. Never import these files directly, as they are generated and change from version to version.
 
 ## Bundling
 
@@ -95,18 +94,17 @@ Now it's time to configure your bundler. Configurations vary for each tool, but
 Once your bundler is configured, you'll be able to import Shoelace components and utilities.
 
 ```js
-import '@shoelace-style/shoelace/dist/shoelace.css';
-import { setBasePath, SlButton, SlIcon, SlInput, SlRating } from '@shoelace-style/shoelace';
+import '@shoelace-style/shoelace/dist/themes/base.css';
+import SlButton from '@shoelace-style/shoelace/dist/components/button/button.js';
+import SlIcon from '@shoelace-style/shoelace/dist/components/icon/icon.js';
+import SlInput from '@shoelace-style/shoelace/dist/components/input/input.js';
+import SlRating from '@shoelace-style/shoelace/dist/components/rating/rating.js';
+import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
 
 // Set the base path to the folder you copied Shoelace's assets to
 setBasePath('/dist/shoelace');
 
-SlButton.register();
-SlIcon.register();
-SlInput.register();
-SlRating.register();
-
 // <sl-button>, <sl-icon>, <sl-input>, and <sl-rating> are ready to use!
 ```
 
-Note that you need to register each component manually to add them to the custom element registry. This isn't done automatically because it would introduce side effects that break tree shaking.
+!> Component modules include side effects for registration purposes. Because of this, importing directly from `@shoelace-style/shoelace` may result in a larger bundle size than necessary. For optimal tree shaking, always import components and utilities from their respective files as shown above.

docs/getting-started/overview.md

@@ -30,7 +30,7 @@ Add the following code to your page.
 
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/base.css">
-<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/all.shoelace.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
 ```
 
 Now you have access to all of Shoelace's components! Try adding a button:

docs/index.html

@@ -43,7 +43,7 @@
     <!-- Import Shoelace -->
     <link rel="stylesheet" href="/dist/themes/base.css" />
     <link rel="stylesheet" href="/dist/themes/dark.css" />
-    <script type="module" src="/dist/all.shoelace.js"></script>
+    <script type="module" src="/dist/shoelace.js"></script>
   </head>
   <body>
     <div id="app"></div>

package.json

@@ -69,9 +69,6 @@
     "typescript": "4.1.5",
     "wait-on": "^5.2.1"
   },
-  "sideEffects": [
-    "*.css"
-  ],
   "husky": {
     "hooks": {
       "pre-commit": "npm run prettier"

scripts/build.cjs

@@ -25,10 +25,8 @@ execSync('node scripts/make-icons.cjs', { stdio: 'inherit' });
 
 (async () => {
   const entryPoints = [
-    // The main dist
+    // The whole shebang dist
     './src/shoelace.ts',
-    // The whole shebang
-    './src/all.shoelace.ts',
     // Components
     ...(await glob('./src/components/**/*.ts')),
     // Public utilities

src/all.shoelace.ts

@@ -1,11 +0,0 @@
-// This is a convenience file that exports everything and registers components automatically
-import * as shoelace from './shoelace';
-
-export * from './shoelace';
-
-Object.keys(shoelace).map(key => {
-  const item = (shoelace as any)[key];
-  if (typeof item.register === 'function') {
-    item.register();
-  }
-});

src/components/alert/alert.ts

@@ -1,6 +1,6 @@
-import { LitElement, html, internalProperty, property, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, internalProperty, property, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter, tag, watch } from '../../internal/decorators';
+import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./alert.scss';
 
 const toastStack = Object.assign(document.createElement('div'), { className: 'sl-toast-stack' });
@@ -19,7 +19,7 @@ const toastStack = Object.assign(document.createElement('div'), { className: 'sl
  * @part message - The alert message.
  * @part close-button - The close button.
  */
-@tag('sl-alert')
+@customElement('sl-alert')
 export default class SlAlert extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/animation/animation.ts

@@ -1,5 +1,5 @@
-import { LitElement, html, property, queryAsync, unsafeCSS } from 'lit-element';
-import { event, EventEmitter, tag, watch } from '../../internal/decorators';
+import { LitElement, customElement, html, property, queryAsync, unsafeCSS } from 'lit-element';
+import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./animation.scss';
 import { animations } from './animations';
 
@@ -9,7 +9,7 @@ import { animations } from './animations';
  *
  * @slot - The element to animate. If multiple elements are to be animated, wrap them in a single container.
  */
-@tag('sl-animation')
+@customElement('sl-animation')
 export default class SlAnimation extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/avatar/avatar.ts

@@ -1,6 +1,5 @@
-import { LitElement, html, internalProperty, property, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, internalProperty, property, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { tag } from '../../internal/decorators';
 import styles from 'sass:./avatar.scss';
 
 /**
@@ -16,7 +15,7 @@ import styles from 'sass:./avatar.scss';
  * @part initials - The container that wraps the avatar initials.
  * @part image - The avatar image.
  */
-@tag('sl-avatar')
+@customElement('sl-avatar')
 export default class SlAvatar extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/badge/badge.ts

@@ -1,6 +1,5 @@
-import { LitElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { tag } from '../../internal/decorators';
 import styles from 'sass:./badge.scss';
 
 /**
@@ -11,7 +10,7 @@ import styles from 'sass:./badge.scss';
  *
  * @part base - The base wrapper
  */
-@tag('sl-badge')
+@customElement('sl-badge')
 export default class SlBadge extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/button-group/button-group.ts

@@ -1,5 +1,4 @@
-import { LitElement, html, property, unsafeCSS } from 'lit-element';
-import { tag } from '../../internal/decorators';
+import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
 import styles from 'sass:./button-group.scss';
 
 /**
@@ -10,7 +9,7 @@ import styles from 'sass:./button-group.scss';
  *
  * @part base - The component's base wrapper.
  */
-@tag('sl-button-group')
+@customElement('sl-button-group')
 export default class SlButtonGroup extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/button/button.ts

@@ -1,7 +1,7 @@
-import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { event, EventEmitter, tag } from '../../internal/decorators';
+import { event, EventEmitter } from '../../internal/decorators';
 import styles from 'sass:./button.scss';
 import { hasSlot } from '../../internal/slot';
 
@@ -21,7 +21,7 @@ import { hasSlot } from '../../internal/slot';
  * @part suffix - The suffix container.
  * @part caret - The button's caret.
  */
-@tag('sl-button')
+@customElement('sl-button')
 export default class SlButton extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/card/card.ts

@@ -1,6 +1,5 @@
-import { LitElement, html, internalProperty, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, internalProperty, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { tag } from '../../internal/decorators';
 import styles from 'sass:./card.scss';
 import { hasSlot } from '../../internal/slot';
 
@@ -19,7 +18,7 @@ import { hasSlot } from '../../internal/slot';
  * @part body - The card's body.
  * @part footer - The card's footer, if present.
  */
-@tag('sl-card')
+@customElement('sl-card')
 export default class SlCard extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/checkbox/checkbox.ts

@@ -1,6 +1,6 @@
-import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter, tag, watch } from '../../internal/decorators';
+import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./checkbox.scss';
 
 let id = 0;
@@ -17,7 +17,7 @@ let id = 0;
  * @part indeterminate-icon - The container that wraps the indeterminate icon.
  * @part label - The checkbox label.
  */
-@tag('sl-checkbox')
+@customElement('sl-checkbox')
 export default class SlCheckbox extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/color-picker/color-picker.ts

@@ -1,7 +1,7 @@
-import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import { styleMap } from 'lit-html/directives/style-map';
-import { event, EventEmitter, tag, watch } from '../../internal/decorators';
+import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./color-picker.scss';
 import { SlDropdown, SlInput } from '../../shoelace';
 import color from 'color';
@@ -30,7 +30,7 @@ import { clamp } from '../../internal/math';
  * @part input - The text input.
  * @part format-button - The toggle format button's base.
  */
-@tag('sl-color-picker')
+@customElement('sl-color-picker')
 export default class SlColorPicker extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/details/details.ts

@@ -1,6 +1,6 @@
-import { LitElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter, tag, watch } from '../../internal/decorators';
+import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./details.scss';
 import { focusVisible } from '../../internal/focus-visible';
 
@@ -21,7 +21,7 @@ let id = 0;
  * @part summary-icon - The expand/collapse summary icon.
  * @part content - The details content.
  */
-@tag('sl-details')
+@customElement('sl-details')
 export default class SlDetails extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/dialog/dialog.ts

@@ -1,7 +1,7 @@
-import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { event, EventEmitter, tag, watch } from '../../internal/decorators';
+import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./dialog.scss';
 import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll';
 import { hasSlot } from '../../internal/slot';
@@ -31,7 +31,7 @@ let id = 0;
  * @part body - The dialog body.
  * @part footer - The dialog footer.
  */
-@tag('sl-dialog')
+@customElement('sl-dialog')
 export default class SlDialog extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/drawer/drawer.ts

@@ -1,7 +1,7 @@
-import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { event, EventEmitter, tag } from '../../internal/decorators';
+import { event, EventEmitter } from '../../internal/decorators';
 import styles from 'sass:./drawer.scss';
 import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll';
 import { hasSlot } from '../../internal/slot';
@@ -31,7 +31,7 @@ let id = 0;
  * @part body - The drawer body.
  * @part footer - The drawer footer.
  */
-@tag('sl-drawer')
+@customElement('sl-drawer')
 export default class SlDrawer extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/dropdown/dropdown.ts

@@ -1,6 +1,6 @@
-import { LitElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter, tag, watch } from '../../internal/decorators';
+import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./dropdown.scss';
 import { SlMenu, SlMenuItem } from '../../shoelace';
 import { scrollIntoView } from '../../internal/scroll';
@@ -20,7 +20,7 @@ let id = 0;
  * @part trigger - The container that wraps the trigger.
  * @part panel - The panel that gets shown when the dropdown is open.
  */
-@tag('sl-dropdown')
+@customElement('sl-dropdown')
 export default class SlDropdown extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/form/form.ts

@@ -1,5 +1,5 @@
-import { LitElement, html, property, query, unsafeCSS } from 'lit-element';
-import { event, EventEmitter, tag } from '../../internal/decorators';
+import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { event, EventEmitter } from '../../internal/decorators';
 import styles from 'sass:./form.scss';
 import {
   SlButton,
@@ -28,7 +28,7 @@ interface FormControl {
  *
  * @part base - The component's base wrapper.
  */
-@tag('sl-form')
+@customElement('sl-form')
 export default class SlForm extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/format-bytes/format-bytes.ts

@@ -1,12 +1,11 @@
-import { LitElement, property } from 'lit-element';
-import { tag } from '../../internal/decorators';
+import { LitElement, customElement, property } from 'lit-element';
 import { formatBytes } from '../../internal/number';
 
 /**
  * @since 2.0
  * @status stable
  */
-@tag('sl-format-bytes')
+@customElement('sl-format-bytes')
 export default class SlFormatBytes extends LitElement {
   /** The number to format in bytes. */
   @property({ type: Number }) value = 0;

src/components/format-date/format-date.ts

@@ -1,11 +1,10 @@
-import { LitElement, property } from 'lit-element';
-import { tag } from '../../internal/decorators';
+import { LitElement, customElement, property } from 'lit-element';
 
 /**
  * @since 2.0
  * @status stable
  */
-@tag('sl-format-date')
+@customElement('sl-format-date')
 export default class SlFormatDate extends LitElement {
   /** The date/time to format. If not set, the current date and time will be used. */
   @property() date: Date | string = new Date();

src/components/format-number/format-number.ts

@@ -1,11 +1,10 @@
-import { LitElement, property } from 'lit-element';
-import { tag } from '../../internal/decorators';
+import { LitElement, customElement, property } from 'lit-element';
 
 /**
  * @since 2.0
  * @status stable
  */
-@tag('sl-format-number')
+@customElement('sl-format-number')
 export default class SlFormatNumber extends LitElement {
   /** The number to format. */
   @property({ type: Number }) value = 0;

src/components/icon-button/icon-button.ts

@@ -1,6 +1,5 @@
-import { LitElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { tag } from '../../internal/decorators';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import styles from 'sass:./icon-button.scss';
 import { focusVisible } from '../../internal/focus-visible';
@@ -13,7 +12,7 @@ import { focusVisible } from '../../internal/focus-visible';
  *
  * @part base - The component's base wrapper.
  */
-@tag('sl-icon-button')
+@customElement('sl-icon-button')
 export default class SlIconButton extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/icon/icon.ts

@@ -1,6 +1,6 @@
-import { LitElement, html, internalProperty, property, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, internalProperty, property, unsafeCSS } from 'lit-element';
 import { unsafeSVG } from 'lit-html/directives/unsafe-svg';
-import { event, EventEmitter, tag, watch } from '../../internal/decorators';
+import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./icon.scss';
 import { getIconLibrary, watchIcon, unwatchIcon } from './library';
 import { requestIcon } from './request';
@@ -13,7 +13,7 @@ const parser = new DOMParser();
  *
  * @part base - The component's base wrapper.
  */
-@tag('sl-icon')
+@customElement('sl-icon')
 export default class SlIcon extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/image-comparer/image-comparer.ts

@@ -1,6 +1,6 @@
-import { LitElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
 import { styleMap } from 'lit-html/directives/style-map';
-import { event, EventEmitter, tag, watch } from '../../internal/decorators';
+import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./image-comparer.scss';
 import { clamp } from '../../internal/math';
 
@@ -20,7 +20,7 @@ import { clamp } from '../../internal/math';
  * @part divider - The divider that separates the images.
  * @part handle - The handle that the user drags to expose the after image.
  */
-@tag('sl-image-comparer')
+@customElement('sl-image-comparer')
 export default class SlImageComparer extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/include/include.ts

@@ -1,5 +1,5 @@
-import { LitElement, html, property, unsafeCSS } from 'lit-element';
-import { event, EventEmitter, tag, watch } from '../../internal/decorators';
+import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
+import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./include.scss';
 import { requestInclude } from './request';
 
@@ -7,7 +7,7 @@ import { requestInclude } from './request';
  * @since 2.0
  * @status stable
  */
-@tag('sl-include')
+@customElement('sl-include')
 export default class SlInclude extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/input/input.ts

@@ -1,7 +1,7 @@
-import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter, tag, watch } from '../../internal/decorators';
+import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./input.scss';
 import { renderFormControl } from '../../internal/form-control';
 import { hasSlot } from '../../internal/slot';
@@ -32,7 +32,7 @@ let id = 0;
  * @part suffix - The input suffix container.
  * @part help-text - The input help text.
  */
-@tag('sl-input')
+@customElement('sl-input')
 export default class SlInput extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/menu-divider/menu-divider.ts

@@ -1,5 +1,4 @@
-import { LitElement, html, unsafeCSS } from 'lit-element';
-import { tag } from '../../internal/decorators';
+import { LitElement, customElement, html, unsafeCSS } from 'lit-element';
 import styles from 'sass:./menu-divider.scss';
 
 /**
@@ -10,7 +9,7 @@ import styles from 'sass:./menu-divider.scss';
  *
  * @part base - The component's base wrapper.
  */
-@tag('sl-menu-divider')
+@customElement('sl-menu-divider')
 export default class SlMenuDivider extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/menu-item/menu-item.ts

@@ -1,5 +1,4 @@
-import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
-import { tag } from '../../internal/decorators';
+import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import styles from 'sass:./menu-item.scss';
@@ -20,7 +19,7 @@ import styles from 'sass:./menu-item.scss';
  * @part label - The menu item label.
  * @part suffix - The suffix container.
  */
-@tag('sl-menu-item')
+@customElement('sl-menu-item')
 export default class SlMenuItem extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/menu-label/menu-label.ts

@@ -1,5 +1,4 @@
-import { LitElement, html, unsafeCSS } from 'lit-element';
-import { tag } from '../../internal/decorators';
+import { LitElement, customElement, html, unsafeCSS } from 'lit-element';
 import styles from 'sass:./menu-label.scss';
 
 /**
@@ -12,7 +11,7 @@ import styles from 'sass:./menu-label.scss';
  *
  * @part base - The component's base wrapper.
  */
-@tag('sl-menu-label')
+@customElement('sl-menu-label')
 export default class SlMenuLabel extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/menu/menu.ts

@@ -1,5 +1,5 @@
-import { LitElement, html, query, unsafeCSS } from 'lit-element';
-import { event, EventEmitter, tag } from '../../internal/decorators';
+import { LitElement, customElement, html, query, unsafeCSS } from 'lit-element';
+import { event, EventEmitter } from '../../internal/decorators';
 import styles from 'sass:./menu.scss';
 import { SlMenuItem } from '../../shoelace';
 import { getTextContent } from '../../internal/slot';
@@ -12,7 +12,7 @@ import { getTextContent } from '../../internal/slot';
  *
  * @part base - The component's base wrapper.
  */
-@tag('sl-menu')
+@customElement('sl-menu')
 export default class SlMenu extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/progress-bar/progress-bar.ts

@@ -1,7 +1,6 @@
-import { LitElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import { styleMap } from 'lit-html/directives/style-map';
-import { tag } from '../../internal/decorators';
 import styles from 'sass:./progress-bar.scss';
 
 /**
@@ -14,7 +13,7 @@ import styles from 'sass:./progress-bar.scss';
  * @part indicator - The progress bar indicator.
  * @part label - The progress bar label.
  */
-@tag('sl-progress-bar')
+@customElement('sl-progress-bar')
 export default class SlProgressBar extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/progress-ring/progress-ring.ts

@@ -1,5 +1,5 @@
-import { LitElement, html, property, query, unsafeCSS } from 'lit-element';
-import { tag, watch } from '../../internal/decorators';
+import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { watch } from '../../internal/decorators';
 import styles from 'sass:./progress-ring.scss';
 
 /**
@@ -11,7 +11,7 @@ import styles from 'sass:./progress-ring.scss';
  * @part base - The component's base wrapper.
  * @part label - The progress ring label.
  */
-@tag('sl-progress-ring')
+@customElement('sl-progress-ring')
 export default class SlProgressRing extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/radio/radio.ts

@@ -1,6 +1,6 @@
-import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter, tag, watch } from '../../internal/decorators';
+import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./radio.scss';
 
 let id = 0;
@@ -16,7 +16,7 @@ let id = 0;
  * @part checked-icon - The container the wraps the checked icon.
  * @part label - The radio label.
  */
-@tag('sl-radio')
+@customElement('sl-radio')
 export default class SlRadio extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/range/range.ts

@@ -1,7 +1,7 @@
-import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { event, EventEmitter, tag, watch } from '../../internal/decorators';
+import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./range.scss';
 import { renderFormControl } from '../../internal/form-control';
 import { hasSlot } from '../../internal/slot';
@@ -19,7 +19,7 @@ let id = 0;
  * @part input - The native range input.
  * @part tooltip - The range tooltip.
  */
-@tag('sl-range')
+@customElement('sl-range')
 export default class SlRange extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/rating/rating.ts

@@ -1,8 +1,8 @@
-import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import { styleMap } from 'lit-html/directives/style-map';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import { event, EventEmitter, tag, watch } from '../../internal/decorators';
+import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./rating.scss';
 import { focusVisible } from '../../internal/focus-visible';
 import { clamp } from '../../internal/math';
@@ -15,7 +15,7 @@ import { clamp } from '../../internal/math';
  *
  * @part base - The component's base wrapper.
  */
-@tag('sl-rating')
+@customElement('sl-rating')
 export default class SlRating extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/relative-time/relative-time.ts

@@ -1,11 +1,11 @@
-import { LitElement, html, internalProperty, property } from 'lit-element';
-import { tag, watch } from '../../internal/decorators';
+import { LitElement, customElement, html, internalProperty, property } from 'lit-element';
+import { watch } from '../../internal/decorators';
 
 /**
  * @since 2.0
  * @status stable
  */
-@tag('sl-relative-time')
+@customElement('sl-relative-time')
 export default class SlRelativeTime extends LitElement {
   private updateTimeout: any;
 

src/components/resize-observer/resize-observer.ts

@@ -1,12 +1,12 @@
-import { LitElement, html, unsafeCSS } from 'lit-element';
-import { event, EventEmitter, tag } from '../../internal/decorators';
+import { LitElement, customElement, html, unsafeCSS } from 'lit-element';
+import { event, EventEmitter } from '../../internal/decorators';
 import styles from 'sass:./resize-observer.scss';
 
 /**
  * @since 2.0
  * @status experimental
  */
-@tag('sl-resize-observer')
+@customElement('sl-resize-observer')
 export default class SlResizeObserver extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/responsive-embed/responsive-embed.ts

@@ -1,6 +1,6 @@
-import { LitElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
 import styles from 'sass:./responsive-embed.scss';
-import { tag, watch } from '../../internal/decorators';
+import { watch } from '../../internal/decorators';
 
 /**
  * @since 2.0
@@ -8,7 +8,7 @@ import { tag, watch } from '../../internal/decorators';
  *
  * @part base - The component's base wrapper.
  */
-@tag('sl-responsive-embed')
+@customElement('sl-responsive-embed')
 export default class SlResponsiveEmbed extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/select/select.ts

@@ -1,6 +1,15 @@
-import { LitElement, TemplateResult, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import {
+  LitElement,
+  customElement,
+  TemplateResult,
+  html,
+  internalProperty,
+  property,
+  query,
+  unsafeCSS
+} from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter, tag, watch } from '../../internal/decorators';
+import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./select.scss';
 import { SlDropdown, SlIconButton, SlMenu, SlMenuItem } from '../../shoelace';
 import { renderFormControl } from '../../internal/form-control';
@@ -33,7 +42,7 @@ let id = 0;
  * @part tag - The multiselect option, a <sl-tag> element.
  * @part tags - The container in which multiselect options are rendered.
  */
-@tag('sl-select')
+@customElement('sl-select')
 export default class SlSelect extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/skeleton/skeleton.ts

@@ -1,6 +1,5 @@
-import { LitElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { tag } from '../../internal/decorators';
 import styles from 'sass:./skeleton.scss';
 
 /**
@@ -10,7 +9,7 @@ import styles from 'sass:./skeleton.scss';
  * @part base - The component's base wrapper.
  * @part indicator - The skeleton's indicator which is responsible for its color and animation.
  */
-@tag('sl-skeleton')
+@customElement('sl-skeleton')
 export default class SlSkeleton extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/spinner/spinner.ts

@@ -1,5 +1,4 @@
-import { LitElement, html, unsafeCSS } from 'lit-element';
-import { tag } from '../../internal/decorators';
+import { LitElement, customElement, html, unsafeCSS } from 'lit-element';
 import styles from 'sass:./spinner.scss';
 
 /**
@@ -8,7 +7,7 @@ import styles from 'sass:./spinner.scss';
  *
  * @part base - The component's base wrapper.
  */
-@tag('sl-spinner')
+@customElement('sl-spinner')
 export default class SlSpinner extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/switch/switch.ts

@@ -1,6 +1,6 @@
-import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter, tag, watch } from '../../internal/decorators';
+import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./switch.scss';
 
 let id = 0;
@@ -16,7 +16,7 @@ let id = 0;
  * @part thumb - The switch position indicator.
  * @part label - The switch label.
  */
-@tag('sl-switch')
+@customElement('sl-switch')
 export default class SlSwitch extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/tab-group/tab-group.ts

@@ -1,6 +1,6 @@
-import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter, tag, watch } from '../../internal/decorators';
+import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./tab-group.scss';
 import { SlTab, SlTabPanel } from '../../shoelace';
 import { focusVisible } from '../../internal/focus-visible';
@@ -23,7 +23,7 @@ import { scrollIntoView } from '../../internal/scroll';
  * @part body - The tab group body where tab panels are slotted in.
  * @part scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.
  */
-@tag('sl-tab-group')
+@customElement('sl-tab-group')
 export default class SlTabGroup extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/tab-panel/tab-panel.ts

@@ -1,5 +1,4 @@
-import { LitElement, html, property, unsafeCSS } from 'lit-element';
-import { tag } from '../../internal/decorators';
+import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
 import styles from 'sass:./tab-panel.scss';
 
 let id = 0;
@@ -12,7 +11,7 @@ let id = 0;
  *
  * @part base - The component's base wrapper.
  */
-@tag('sl-tab-panel')
+@customElement('sl-tab-panel')
 export default class SlTabPanel extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/tab/tab.ts

@@ -1,6 +1,6 @@
-import { LitElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter, tag } from '../../internal/decorators';
+import { event, EventEmitter } from '../../internal/decorators';
 import styles from 'sass:./tab.scss';
 
 let id = 0;
@@ -16,7 +16,7 @@ let id = 0;
  * @part base - The component's base wrapper.
  * @part close-button - The close button, which is the icon button's base wrapper.
  */
-@tag('sl-tab')
+@customElement('sl-tab')
 export default class SlTab extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/tag/tag.ts

@@ -1,6 +1,6 @@
-import { LitElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter, tag } from '../../internal/decorators';
+import { event, EventEmitter } from '../../internal/decorators';
 import styles from 'sass:./tag.scss';
 
 /**
@@ -15,7 +15,7 @@ import styles from 'sass:./tag.scss';
  * @part content - The tag content.
  * @part clear-button - The clear button.
  */
-@tag('sl-tag')
+@customElement('sl-tag')
 export default class SlTag extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/textarea/textarea.ts

@@ -1,7 +1,7 @@
-import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { event, EventEmitter, tag, watch } from '../../internal/decorators';
+import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./textarea.scss';
 import { renderFormControl } from '../../internal/form-control';
 import { hasSlot } from '../../internal/slot';
@@ -21,7 +21,7 @@ let id = 0;
  * @part textarea - The textarea control.
  * @part help-text - The textarea help text.
  */
-@tag('sl-textarea')
+@customElement('sl-textarea')
 export default class SlTextarea extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/tooltip/tooltip.ts

@@ -1,6 +1,6 @@
-import { LitElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter, tag, watch } from '../../internal/decorators';
+import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./tooltip.scss';
 import Popover from '../../internal/popover';
 
@@ -15,7 +15,7 @@ let id = 0;
  *
  * @part base - The component's base wrapper.
  */
-@tag('sl-tooltip')
+@customElement('sl-tooltip')
 export default class SlTooltip extends LitElement {
   static styles = unsafeCSS(styles);
 

src/internal/decorators.ts

@@ -61,29 +61,6 @@ export class EventEmitter<T> {
   }
 }
 
-// @tag decorator
-//
-// LitElement suggests using their @customElement decorator, but this introduces a side effect that defines the element
-// and breaks tree shaking. We use this alternative to add a defineElement() function to the element instead.
-//
-// Usage:
-//
-//  @tag('sl-button')
-//  class SlButton extends LitElement { ... }
-//
-// To register the element:
-//
-//  import { SlButton } from '@shoelace-style/shoelace';
-//  SlButton.defineElement();
-//
-export function tag(tagName: string) {
-  return (protoOrDescriptor: any): any => {
-    protoOrDescriptor.register = function () {
-      customElements.define(tagName, protoOrDescriptor);
-    };
-  };
-}
-
 // @watch decorator
 //
 // Runs when an observed property changes, e.g. @property or @internalProperty. This will only run after the first