use @tag instead of @customElement for treeshaking

src/components/alert/alert.ts

@@ -1,6 +1,6 @@
-import { LitElement, customElement, html, internalProperty, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, internalProperty, property, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter } from '../../internal/event';
+import { event, EventEmitter, tag } 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.
  */
-@customElement('sl-alert')
+@tag('sl-alert')
 export class SlAlert extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/animation/animation.ts

@@ -1,6 +1,5 @@
-import { LitElement, customElement, html, property, queryAsync, unsafeCSS } from 'lit-element';
-import { event, EventEmitter } from '../../internal/event';
-import { watch } from '../../internal/watch';
+import { LitElement, html, property, queryAsync, unsafeCSS } from 'lit-element';
+import { event, EventEmitter, tag, watch } from '../../internal/decorators';
 import styles from 'sass:./animation.scss';
 import { animations } from './animations';
 
@@ -10,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.
  */
-@customElement('sl-animation')
+@tag('sl-animation')
 export class SlAnimation extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/avatar/avatar.ts

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

src/components/badge/badge.ts

@@ -1,5 +1,6 @@
-import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, 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';
 
 /**
@@ -10,7 +11,7 @@ import styles from 'sass:./badge.scss';
  *
  * @part base - The base wrapper
  */
-@customElement('sl-badge')
+@tag('sl-badge')
 export class SlBadge extends LitElement {
   static styles = unsafeCSS(styles);
 

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

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

src/components/button/button.ts

@@ -1,6 +1,6 @@
-import { LitElement, customElement, html, internalProperty, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, internalProperty, property, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter } from '../../internal/event';
+import { event, EventEmitter, tag } 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.
  */
-@customElement('sl-button')
+@tag('sl-button')
 export class SlButton extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/card/card.ts

@@ -1,5 +1,6 @@
-import { LitElement, customElement, html, internalProperty, unsafeCSS } from 'lit-element';
+import { LitElement, 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';
 
@@ -18,7 +19,7 @@ import { hasSlot } from '../../internal/slot';
  * @part body - The card's body.
  * @part footer - The card's footer, if present.
  */
-@customElement('sl-card')
+@tag('sl-card')
 export class SlCard extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/checkbox/checkbox.ts

@@ -1,6 +1,6 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter } from '../../internal/event';
+import { event, EventEmitter, tag } 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.
  */
-@customElement('sl-checkbox')
+@tag('sl-checkbox')
 export class SlCheckbox extends LitElement {
   static styles = unsafeCSS(styles);
 

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

@@ -1,7 +1,7 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, 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 } from '../../internal/event';
+import { event, EventEmitter, tag } 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.
  */
-@customElement('sl-color-picker')
+@tag('sl-color-picker')
 export class SlColorPicker extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/details/details.ts

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

src/components/dialog/dialog.ts

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

src/components/drawer/drawer.ts

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

src/components/dropdown/dropdown.ts

@@ -1,7 +1,6 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter } from '../../internal/event';
-import { watch } from '../../internal/watch';
+import { event, EventEmitter, tag, watch } from '../../internal/decorators';
 import styles from 'sass:./dropdown.scss';
 import { SlMenu, SlMenuItem } from '../../shoelace';
 import { scrollIntoView } from '../../internal/scroll';
@@ -21,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.
  */
-@customElement('sl-dropdown')
+@tag('sl-dropdown')
 export class SlDropdown extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/form/form.ts

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

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

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

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

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

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

@@ -1,5 +1,6 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, 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';
@@ -12,7 +13,7 @@ import { focusVisible } from '../../internal/focus-visible';
  *
  * @part base - The component's base wrapper.
  */
-@customElement('sl-icon-button')
+@tag('sl-icon-button')
 export class SlIconButton extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/icon/icon.ts

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

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

@@ -1,8 +1,7 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, property, query, unsafeCSS } from 'lit-element';
 import { styleMap } from 'lit-html/directives/style-map';
+import { event, EventEmitter, tag, watch } from '../../internal/decorators';
 import styles from 'sass:./image-comparer.scss';
-import { event, EventEmitter } from '../../internal/event';
-import { watch } from '../../internal/watch';
 import { clamp } from '../../internal/math';
 
 /**
@@ -21,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.
  */
-@customElement('sl-image-comparer')
+@tag('sl-image-comparer')
 export class SlImageComparer extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/include/include.ts

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

src/components/input/input.ts

@@ -1,8 +1,7 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, 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 } from '../../internal/event';
-import { watch } from '../../internal/watch';
+import { event, EventEmitter, tag, watch } from '../../internal/decorators';
 import styles from 'sass:./input.scss';
 import { renderFormControl } from '../../internal/form-control';
 import { hasSlot } from '../../internal/slot';
@@ -33,7 +32,7 @@ let id = 0;
  * @part suffix - The input suffix container.
  * @part help-text - The input help text.
  */
-@customElement('sl-input')
+@tag('sl-input')
 export class SlInput extends LitElement {
   static styles = unsafeCSS(styles);
 

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

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

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

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

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

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

src/components/menu/menu.ts

@@ -1,5 +1,5 @@
-import { LitElement, customElement, html, query, unsafeCSS } from 'lit-element';
-import { event, EventEmitter } from '../../internal/event';
+import { LitElement, html, query, unsafeCSS } from 'lit-element';
+import { event, EventEmitter, tag } 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.
  */
-@customElement('sl-menu')
+@tag('sl-menu')
 export class SlMenu extends LitElement {
   static styles = unsafeCSS(styles);
 

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

@@ -1,6 +1,7 @@
-import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, 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';
 
 /**
@@ -13,7 +14,7 @@ import styles from 'sass:./progress-bar.scss';
  * @part indicator - The progress bar indicator.
  * @part label - The progress bar label.
  */
-@customElement('sl-progress-bar')
+@tag('sl-progress-bar')
 export class SlProgressBar extends LitElement {
   static styles = unsafeCSS(styles);
 

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

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

src/components/radio/radio.ts

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

src/components/range/range.ts

@@ -1,8 +1,7 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, 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 } from '../../internal/event';
-import { watch } from '../../internal/watch';
+import { event, EventEmitter, tag, watch } from '../../internal/decorators';
 import styles from 'sass:./range.scss';
 import { renderFormControl } from '../../internal/form-control';
 import { hasSlot } from '../../internal/slot';
@@ -20,7 +19,7 @@ let id = 0;
  * @part input - The native range input.
  * @part tooltip - The range tooltip.
  */
-@customElement('sl-range')
+@tag('sl-range')
 export class SlRange extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/rating/rating.ts

@@ -1,9 +1,8 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, 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 } from '../../internal/event';
-import { watch } from '../../internal/watch';
+import { event, EventEmitter, tag, watch } from '../../internal/decorators';
 import styles from 'sass:./rating.scss';
 import { focusVisible } from '../../internal/focus-visible';
 import { clamp } from '../../internal/math';
@@ -16,7 +15,7 @@ import { clamp } from '../../internal/math';
  *
  * @part base - The component's base wrapper.
  */
-@customElement('sl-rating')
+@tag('sl-rating')
 export class SlRating extends LitElement {
   static styles = unsafeCSS(styles);
 

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

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

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

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

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

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

src/components/select/select.ts

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

src/components/skeleton/skeleton.ts

@@ -1,5 +1,6 @@
-import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, 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';
 
 /**
@@ -9,7 +10,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.
  */
-@customElement('sl-skeleton')
+@tag('sl-skeleton')
 export class SlSkeleton extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/spinner/spinner.ts

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

src/components/switch/switch.ts

@@ -1,6 +1,6 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter } from '../../internal/event';
+import { event, EventEmitter, tag } 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.
  */
-@customElement('sl-switch')
+@tag('sl-switch')
 export class SlSwitch extends LitElement {
   static styles = unsafeCSS(styles);
 

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

@@ -1,7 +1,6 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter } from '../../internal/event';
-import { watch } from '../../internal/watch';
+import { event, EventEmitter, tag, watch } from '../../internal/decorators';
 import styles from 'sass:./tab-group.scss';
 import { SlTab, SlTabPanel } from '../../shoelace';
 import { getOffset } from '../../internal/offset';
@@ -24,7 +23,7 @@ import { focusVisible } from '../../internal/focus-visible';
  * @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.
  */
-@customElement('sl-tab-group')
+@tag('sl-tab-group')
 export class SlTabGroup extends LitElement {
   static styles = unsafeCSS(styles);
 

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

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

src/components/tab/tab.ts

@@ -1,6 +1,6 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter } from '../../internal/event';
+import { event, EventEmitter, tag } 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.
  */
-@customElement('sl-tab')
+@tag('sl-tab')
 export class SlTab extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/tag/tag.ts

@@ -1,6 +1,6 @@
-import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, property, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter } from '../../internal/event';
+import { event, EventEmitter, tag } 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.
  */
-@customElement('sl-tag')
+@tag('sl-tag')
 export class SlTag extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/textarea/textarea.ts

@@ -1,8 +1,7 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, 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 } from '../../internal/event';
-import { watch } from '../../internal/watch';
+import { event, EventEmitter, tag, watch } from '../../internal/decorators';
 import styles from 'sass:./textarea.scss';
 import { renderFormControl } from '../../internal/form-control';
 import { hasSlot } from '../../internal/slot';
@@ -22,7 +21,7 @@ let id = 0;
  * @part textarea - The textarea control.
  * @part help-text - The textarea help text.
  */
-@customElement('sl-textarea')
+@tag('sl-textarea')
 export class SlTextarea extends LitElement {
   static styles = unsafeCSS(styles);
 

src/components/tooltip/tooltip.ts

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