diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 9e98b806..90f76f83 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -6,6 +6,10 @@ 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
+
+- Updated to the prerelease versions of LitElement and lit-html
+
 ## 2.0.0-beta.35
 
 - Fixed a bug in `sl-animation` where `sl-cancel` and `sl-finish` events would never fire
diff --git a/package-lock.json b/package-lock.json
index 092cdd40..522dabe4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -82,6 +82,11 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "@lit/reactive-element": {
+      "version": "1.0.0-pre.2",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.0.0-pre.2.tgz",
+      "integrity": "sha512-IjguhOf9rFxtStHr8Sou2TuaUgpeLFojdKDoorssuyY0MnPCFdlcOJ2VhTOnoxV3fwHDC9m3Esc8zT+B3UG3Kw=="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -2303,18 +2308,36 @@
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
       "dev": true
     },
-    "lit-element": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.4.0.tgz",
-      "integrity": "sha512-pBGLglxyhq/Prk2H91nA0KByq/hx/wssJBQFiYqXhGDvEnY31PRGYf1RglVzyLeRysu0IHm2K0P196uLLWmwFg==",
+    "lit": {
+      "version": "2.0.0-pre.1",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.0.0-pre.1.tgz",
+      "integrity": "sha512-1c/Df773r0yKZmZfzz0e0EzltdKDmEKrfyF7DFWagmiMxaA3c/9m9+58BhMF7LJg2Rt04L5ZQ3GWpkt1MtX/mA==",
       "requires": {
-        "lit-html": "^1.1.1"
+        "@lit/reactive-element": "^1.0.0-pre.2",
+        "lit-element": "^3.0.0-pre.3",
+        "lit-html": "^2.0.0-pre.6"
+      }
+    },
+    "lit-element": {
+      "version": "3.0.0-pre.3",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.0.0-pre.3.tgz",
+      "integrity": "sha512-E6QaOQ+OJx4HX5bI6Xtojw5qHlOSY5R7NWXRtbq+/xxIIPXfwNTF5fOpOKREd8/GSdQP1hHBCxBovlitVPKYaA==",
+      "requires": {
+        "@lit/reactive-element": "^1.0.0-pre.1",
+        "lit-html": "^2.0.0-pre.4"
+      },
+      "dependencies": {
+        "lit-html": {
+          "version": "2.0.0-pre.6",
+          "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.0.0-pre.6.tgz",
+          "integrity": "sha512-cqF/ukSYYkV4KLzeDXk7pMgkrWK6Vn5TvfXewK+SpVDMCw7AXd7Ft+6WShlbTb27AZAFGUfL3uM2kKsrTqT14w=="
+        }
       }
     },
     "lit-html": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.3.0.tgz",
-      "integrity": "sha512-0Q1bwmaFH9O14vycPHw8C/IeHMk/uSDldVLIefu/kfbTBGIc44KGH6A8p1bDfxUfHdc8q6Ct7kQklWoHgr4t1Q=="
+      "version": "2.0.0-pre.6",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.0.0-pre.6.tgz",
+      "integrity": "sha512-cqF/ukSYYkV4KLzeDXk7pMgkrWK6Vn5TvfXewK+SpVDMCw7AXd7Ft+6WShlbTb27AZAFGUfL3uM2kKsrTqT14w=="
     },
     "localtunnel": {
       "version": "2.0.1",
diff --git a/package.json b/package.json
index 2cb05744..d1cc22a4 100644
--- a/package.json
+++ b/package.json
@@ -31,15 +31,15 @@
   "scripts": {
     "start": "node scripts/build.cjs --dev",
     "build": "node scripts/build.cjs",
-    "prepublish": "npm run build",
+    "prepublishOnly": "npm run build",
     "prettier": "prettier --write --loglevel warn ."
   },
   "dependencies": {
     "@popperjs/core": "^2.7.0",
     "@shoelace-style/animations": "^1.1.0",
     "color": "^3.1.3",
-    "lit-element": "^2.4.0",
-    "lit-html": "^1.3.0"
+    "lit": "^2.0.0-pre.1",
+    "lit-html": "^2.0.0-pre.6"
   },
   "devDependencies": {
     "@types/color": "^3.0.1",
diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts
index e925265b..52928cd6 100644
--- a/src/components/alert/alert.ts
+++ b/src/components/alert/alert.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./alert.scss';
@@ -25,7 +26,7 @@ export default class SlAlert extends LitElement {
 
   private autoHideTimeout: any;
 
-  @internalProperty() private isVisible = false;
+  @state() private isVisible = false;
 
   /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
   @property({ type: Boolean, reflect: true }) open = false;
diff --git a/src/components/animation/animation.ts b/src/components/animation/animation.ts
index 023182b4..a16869a4 100644
--- a/src/components/animation/animation.ts
+++ b/src/components/animation/animation.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, queryAsync, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, queryAsync } from 'lit/decorators';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./animation.scss';
 import { animations } from './animations';
@@ -49,7 +50,7 @@ export default class SlAnimation extends LitElement {
   @property({ attribute: 'iteration-start', type: Number }) iterationStart = 0;
 
   /** The keyframes to use for the animation. If this is set, `name` will be ignored. */
-  @property() keyframes: Keyframe[];
+  @property({ attribute: false }) keyframes: Keyframe[];
 
   /**
    * Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this
diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts
index 7d7205d8..c33858c8 100644
--- a/src/components/avatar/avatar.ts
+++ b/src/components/avatar/avatar.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import styles from 'sass:./avatar.scss';
 
@@ -19,7 +20,7 @@ import styles from 'sass:./avatar.scss';
 export default class SlAvatar extends LitElement {
   static styles = unsafeCSS(styles);
 
-  @internalProperty() private hasError = false;
+  @state() private hasError = false;
 
   /** The image source to use for the avatar. */
   @property({ reflect: true }) image: string;
@@ -43,7 +44,6 @@ export default class SlAvatar extends LitElement {
           'avatar--rounded': this.shape === 'rounded',
           'avatar--square': this.shape === 'square'
         })}
-        role="image"
         aria-label=${this.alt}
       >
         ${this.initials
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index c1ab2dd7..7d856893 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import styles from 'sass:./badge.scss';
 
diff --git a/src/components/button-group/button-group.ts b/src/components/button-group/button-group.ts
index d3de4292..43fad567 100644
--- a/src/components/button-group/button-group.ts
+++ b/src/components/button-group/button-group.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators';
 import styles from 'sass:./button-group.scss';
 
 /**
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index a98bb8b9..bf109e91 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { event, EventEmitter } from '../../internal/decorators';
@@ -27,10 +28,10 @@ export default class SlButton extends LitElement {
 
   @query('.button') button: HTMLButtonElement | HTMLLinkElement;
 
-  @internalProperty() private hasFocus = false;
-  @internalProperty() private hasLabel = false;
-  @internalProperty() private hasPrefix = false;
-  @internalProperty() private hasSuffix = false;
+  @state() private hasFocus = false;
+  @state() private hasLabel = false;
+  @state() private hasPrefix = false;
+  @state() private hasSuffix = false;
 
   /** The button's type. */
   @property({ reflect: true }) type: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' =
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
index a21f426d..26373528 100644
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import styles from 'sass:./card.scss';
 import { hasSlot } from '../../internal/slot';
@@ -22,9 +23,9 @@ import { hasSlot } from '../../internal/slot';
 export default class SlCard extends LitElement {
   static styles = unsafeCSS(styles);
 
-  @internalProperty() private hasFooter = false;
-  @internalProperty() private hasImage = false;
-  @internalProperty() private hasHeader = false;
+  @state() private hasFooter = false;
+  @state() private hasImage = false;
+  @state() private hasHeader = false;
 
   connectedCallback() {
     super.connectedCallback();
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index e258fae4..921316c6 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./checkbox.scss';
@@ -26,7 +27,7 @@ export default class SlCheckbox extends LitElement {
   private inputId = `checkbox-${++id}`;
   private labelId = `checkbox-label-${id}`;
 
-  @internalProperty() private hasFocus = false;
+  @state() private hasFocus = false;
 
   /** The checkbox's name attribute. */
   @property() name: string;
diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts
index ceea88db..2da9e7e4 100644
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { styleMap } from 'lit-html/directives/style-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
@@ -41,12 +42,12 @@ export default class SlColorPicker extends LitElement {
   private bypassValueParse = false;
   private lastValueEmitted: string;
 
-  @internalProperty() private inputValue = '';
-  @internalProperty() private hue = 0;
-  @internalProperty() private saturation = 100;
-  @internalProperty() private lightness = 100;
-  @internalProperty() private alpha = 100;
-  @internalProperty() private showCopyFeedback = false;
+  @state() private inputValue = '';
+  @state() private hue = 0;
+  @state() private saturation = 100;
+  @state() private lightness = 100;
+  @state() private alpha = 100;
+  @state() private showCopyFeedback = false;
 
   /** The current color. */
   @property() value = '#ffffff';
diff --git a/src/components/details/details.ts b/src/components/details/details.ts
index 36a4121a..3292ab7e 100644
--- a/src/components/details/details.ts
+++ b/src/components/details/details.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./details.scss';
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index 41f6cf3c..fda99915 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { event, EventEmitter, watch } from '../../internal/decorators';
@@ -43,8 +44,8 @@ export default class SlDialog extends LitElement {
   private willShow = false;
   private willHide = false;
 
-  @internalProperty() private hasFooter = false;
-  @internalProperty() private isVisible = false;
+  @state() private hasFooter = false;
+  @state() private isVisible = false;
 
   /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */
   @property({ type: Boolean, reflect: true }) open = false;
diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts
index 4ba091ee..4ccefc3a 100644
--- a/src/components/drawer/drawer.ts
+++ b/src/components/drawer/drawer.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { event, EventEmitter } from '../../internal/decorators';
@@ -43,8 +44,8 @@ export default class SlDrawer extends LitElement {
   private willShow = false;
   private willHide = false;
 
-  @internalProperty() private hasFooter = false;
-  @internalProperty() private isVisible = false;
+  @state() private hasFooter = false;
+  @state() private isVisible = false;
 
   /** Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods. */
   @property({ type: Boolean, reflect: true }) open = false;
diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
index c5b7f82b..b3ff6312 100644
--- a/src/components/dropdown/dropdown.ts
+++ b/src/components/dropdown/dropdown.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./dropdown.scss';
diff --git a/src/components/form/form.ts b/src/components/form/form.ts
index 4cf3eede..3f0f63c7 100644
--- a/src/components/form/form.ts
+++ b/src/components/form/form.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import { event, EventEmitter } from '../../internal/decorators';
 import styles from 'sass:./form.scss';
 import {
diff --git a/src/components/format-bytes/format-bytes.ts b/src/components/format-bytes/format-bytes.ts
index 8f182213..dd950055 100644
--- a/src/components/format-bytes/format-bytes.ts
+++ b/src/components/format-bytes/format-bytes.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, property } from 'lit-element';
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators';
 import { formatBytes } from '../../internal/number';
 
 /**
diff --git a/src/components/format-date/format-date.ts b/src/components/format-date/format-date.ts
index 29978897..4f7e5bb2 100644
--- a/src/components/format-date/format-date.ts
+++ b/src/components/format-date/format-date.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, property } from 'lit-element';
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators';
 
 /**
  * @since 2.0
diff --git a/src/components/format-number/format-number.ts b/src/components/format-number/format-number.ts
index e6273e8e..8c376c2d 100644
--- a/src/components/format-number/format-number.ts
+++ b/src/components/format-number/format-number.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, property } from 'lit-element';
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators';
 
 /**
  * @since 2.0
diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts
index 71303a48..9a5af828 100644
--- a/src/components/icon-button/icon-button.ts
+++ b/src/components/icon-button/icon-button.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import styles from 'sass:./icon-button.scss';
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 43c75d26..bb1bf796 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
 import { unsafeSVG } from 'lit-html/directives/unsafe-svg';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./icon.scss';
@@ -17,7 +18,7 @@ const parser = new DOMParser();
 export default class SlIcon extends LitElement {
   static styles = unsafeCSS(styles);
 
-  @internalProperty() private svg = '';
+  @state() private svg = '';
 
   /** The name of the icon to draw. */
   @property() name: string;
diff --git a/src/components/image-comparer/image-comparer.ts b/src/components/image-comparer/image-comparer.ts
index 908520c0..6571885b 100644
--- a/src/components/image-comparer/image-comparer.ts
+++ b/src/components/image-comparer/image-comparer.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import { styleMap } from 'lit-html/directives/style-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./image-comparer.scss';
diff --git a/src/components/include/include.ts b/src/components/include/include.ts
index 5b0dbd41..6fe9e405 100644
--- a/src/components/include/include.ts
+++ b/src/components/include/include.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./include.scss';
 import { requestInclude } from './request';
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 4e78f245..92cc0ca6 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
@@ -42,10 +43,10 @@ export default class SlInput extends LitElement {
   private inputId = `input-${++id}`;
   private labelId = `input-label-${id}`;
 
-  @internalProperty() private hasFocus = false;
-  @internalProperty() private hasHelpTextSlot = false;
-  @internalProperty() private hasLabelSlot = false;
-  @internalProperty() private isPasswordVisible = false;
+  @state() private hasFocus = false;
+  @state() private hasHelpTextSlot = false;
+  @state() private hasLabelSlot = false;
+  @state() private isPasswordVisible = false;
 
   /** The input's type. */
   @property({ reflect: true }) type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' = 'text';
diff --git a/src/components/menu-divider/menu-divider.ts b/src/components/menu-divider/menu-divider.ts
index cb261a9d..399e35b6 100644
--- a/src/components/menu-divider/menu-divider.ts
+++ b/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';
+import { customElement } from 'lit/decorators';
 import styles from 'sass:./menu-divider.scss';
 
 /**
diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts
index 6da463a7..fbec1c51 100644
--- a/src/components/menu-item/menu-item.ts
+++ b/src/components/menu-item/menu-item.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import styles from 'sass:./menu-item.scss';
@@ -25,7 +26,7 @@ export default class SlMenuItem extends LitElement {
 
   @query('.menu-item') menuItem: HTMLElement;
 
-  @internalProperty() private hasFocus = false;
+  @state() private hasFocus = false;
 
   /** Draws the item in a checked state. */
   @property({ type: Boolean, reflect: true }) checked = false;
diff --git a/src/components/menu-label/menu-label.ts b/src/components/menu-label/menu-label.ts
index 225529ee..248788e6 100644
--- a/src/components/menu-label/menu-label.ts
+++ b/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';
+import { customElement } from 'lit/decorators';
 import styles from 'sass:./menu-label.scss';
 
 /**
diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
index ab77000b..6ed35e06 100644
--- a/src/components/menu/menu.ts
+++ b/src/components/menu/menu.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, query } from 'lit/decorators';
 import { event, EventEmitter } from '../../internal/decorators';
 import styles from 'sass:./menu.scss';
 import { SlMenuItem } from '../../shoelace';
diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts
index 4ce52064..54f71b0f 100644
--- a/src/components/progress-bar/progress-bar.ts
+++ b/src/components/progress-bar/progress-bar.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { styleMap } from 'lit-html/directives/style-map';
 import styles from 'sass:./progress-bar.scss';
diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts
index 7b7ad722..5cb68de2 100644
--- a/src/components/progress-ring/progress-ring.ts
+++ b/src/components/progress-ring/progress-ring.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import { watch } from '../../internal/decorators';
 import styles from 'sass:./progress-ring.scss';
 
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index 676b9362..aae5d816 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./radio.scss';
@@ -25,7 +26,7 @@ export default class SlRadio extends LitElement {
   private inputId = `radio-${++id}`;
   private labelId = `radio-label-${id}`;
 
-  @internalProperty() private hasFocus = false;
+  @state() private hasFocus = false;
 
   /** The radio's name attribute. */
   @property() name: string;
diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index 3d9981aa..d9b2597c 100644
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { event, EventEmitter, watch } from '../../internal/decorators';
@@ -31,10 +32,10 @@ export default class SlRange extends LitElement {
   private labelId = `input-label-${id}`;
   private resizeObserver: ResizeObserver;
 
-  @internalProperty() private hasFocus = false;
-  @internalProperty() private hasHelpTextSlot = false;
-  @internalProperty() private hasLabelSlot = false;
-  @internalProperty() private hasTooltip = false;
+  @state() private hasFocus = false;
+  @state() private hasHelpTextSlot = false;
+  @state() private hasLabelSlot = false;
+  @state() private hasTooltip = false;
 
   /** The input's name attribute. */
   @property() name = '';
diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts
index 8dd16b19..3836cb39 100644
--- a/src/components/rating/rating.ts
+++ b/src/components/rating/rating.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { styleMap } from 'lit-html/directives/style-map';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
@@ -21,8 +22,8 @@ export default class SlRating extends LitElement {
 
   @query('.rating') rating: HTMLElement;
 
-  @internalProperty() private hoverValue = 0;
-  @internalProperty() private isHovering = false;
+  @state() private hoverValue = 0;
+  @state() private isHovering = false;
 
   /** The current rating. */
   @property({ type: Number }) value = 0;
diff --git a/src/components/relative-time/relative-time.ts b/src/components/relative-time/relative-time.ts
index 994e6b4e..4d5e03e3 100644
--- a/src/components/relative-time/relative-time.ts
+++ b/src/components/relative-time/relative-time.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
 import { watch } from '../../internal/decorators';
 
 /**
@@ -9,9 +10,9 @@ import { watch } from '../../internal/decorators';
 export default class SlRelativeTime extends LitElement {
   private updateTimeout: any;
 
-  @internalProperty() private isoTime = '';
-  @internalProperty() private relativeTime = '';
-  @internalProperty() private titleTime = '';
+  @state() private isoTime = '';
+  @state() private relativeTime = '';
+  @state() private titleTime = '';
 
   /** The date from which to calculate time from. */
   @property() date: Date | string;
diff --git a/src/components/resize-observer/resize-observer.ts b/src/components/resize-observer/resize-observer.ts
index f746ebf0..21ed66ba 100644
--- a/src/components/resize-observer/resize-observer.ts
+++ b/src/components/resize-observer/resize-observer.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators';
 import { event, EventEmitter } from '../../internal/decorators';
 import styles from 'sass:./resize-observer.scss';
 
diff --git a/src/components/responsive-embed/responsive-embed.ts b/src/components/responsive-embed/responsive-embed.ts
index 7c012ef2..9ecf97bb 100644
--- a/src/components/responsive-embed/responsive-embed.ts
+++ b/src/components/responsive-embed/responsive-embed.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import styles from 'sass:./responsive-embed.scss';
 import { watch } from '../../internal/decorators';
 
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index b4d284d8..08ea186c 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -1,13 +1,5 @@
-import {
-  LitElement,
-  customElement,
-  TemplateResult,
-  html,
-  internalProperty,
-  property,
-  query,
-  unsafeCSS
-} from 'lit-element';
+import { LitElement, TemplateResult, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./select.scss';
@@ -55,12 +47,12 @@ export default class SlSelect extends LitElement {
   private labelId = `select-label-${id}`;
   private resizeObserver: ResizeObserver;
 
-  @internalProperty() private hasFocus = false;
-  @internalProperty() private hasHelpTextSlot = false;
-  @internalProperty() private hasLabelSlot = false;
-  @internalProperty() private isOpen = false;
-  @internalProperty() private displayLabel = '';
-  @internalProperty() private displayTags: TemplateResult[] = [];
+  @state() private hasFocus = false;
+  @state() private hasHelpTextSlot = false;
+  @state() private hasLabelSlot = false;
+  @state() private isOpen = false;
+  @state() private displayLabel = '';
+  @state() private displayTags: TemplateResult[] = [];
 
   /** Enables multiselect. With this enabled, value will be an array. */
   @property({ type: Boolean, reflect: true }) multiple = false;
diff --git a/src/components/skeleton/skeleton.ts b/src/components/skeleton/skeleton.ts
index ebd4e11b..f56a4648 100644
--- a/src/components/skeleton/skeleton.ts
+++ b/src/components/skeleton/skeleton.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import styles from 'sass:./skeleton.scss';
 
diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts
index e292e545..02396462 100644
--- a/src/components/spinner/spinner.ts
+++ b/src/components/spinner/spinner.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators';
 import styles from 'sass:./spinner.scss';
 
 /**
diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts
index 2ac902b8..8a041abf 100644
--- a/src/components/switch/switch.ts
+++ b/src/components/switch/switch.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./switch.scss';
@@ -25,7 +26,7 @@ export default class SlSwitch extends LitElement {
   private switchId = `switch-${++id}`;
   private labelId = `switch-label-${id}`;
 
-  @internalProperty() private hasFocus = false;
+  @state() private hasFocus = false;
 
   /** The switch's name attribute. */
   @property() name: string;
diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts
index 7a5223b7..db3855ce 100644
--- a/src/components/tab-group/tab-group.ts
+++ b/src/components/tab-group/tab-group.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./tab-group.scss';
@@ -38,7 +39,7 @@ export default class SlTabGroup extends LitElement {
   private tabs: SlTab[] = [];
   private panels: SlTabPanel[] = [];
 
-  @internalProperty() private hasScrollControls = false;
+  @state() private hasScrollControls = false;
 
   /** The placement of the tabs. */
   @property() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';
diff --git a/src/components/tab-panel/tab-panel.ts b/src/components/tab-panel/tab-panel.ts
index 4e8ce006..b1fe4146 100644
--- a/src/components/tab-panel/tab-panel.ts
+++ b/src/components/tab-panel/tab-panel.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators';
 import styles from 'sass:./tab-panel.scss';
 
 let id = 0;
diff --git a/src/components/tab/tab.ts b/src/components/tab/tab.ts
index 154ecd80..8b4e63fa 100644
--- a/src/components/tab/tab.ts
+++ b/src/components/tab/tab.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter } from '../../internal/decorators';
 import styles from 'sass:./tab.scss';
diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts
index 82dabb56..4778d981 100644
--- a/src/components/tag/tag.ts
+++ b/src/components/tag/tag.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter } from '../../internal/decorators';
 import styles from 'sass:./tag.scss';
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index fa5c0317..2d4001d1 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { event, EventEmitter, watch } from '../../internal/decorators';
@@ -32,9 +33,9 @@ export default class SlTextarea extends LitElement {
   private labelId = `textarea-label-${id}`;
   private resizeObserver: ResizeObserver;
 
-  @internalProperty() private hasFocus = false;
-  @internalProperty() private hasHelpTextSlot = false;
-  @internalProperty() private hasLabelSlot = false;
+  @state() private hasFocus = false;
+  @state() private hasHelpTextSlot = false;
+  @state() private hasLabelSlot = false;
 
   /** The textarea's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts
index 338c8165..eb564fda 100644
--- a/src/components/tooltip/tooltip.ts
+++ b/src/components/tooltip/tooltip.ts
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import { classMap } from 'lit-html/directives/class-map';
 import { event, EventEmitter, watch } from '../../internal/decorators';
 import styles from 'sass:./tooltip.scss';
diff --git a/src/internal/decorators.ts b/src/internal/decorators.ts
index ca8d70bf..08b10761 100644
--- a/src/internal/decorators.ts
+++ b/src/internal/decorators.ts
@@ -63,7 +63,7 @@ export class EventEmitter<T> {
 
 // @watch decorator
 //
-// Runs after an observed property changes, e.g. @property or @internalProperty. This will only run after the first
+// Runs after an observed property changes, e.g. @property or @state. This will only run after the first
 // update, so initial attribute => property mappings will not trigger the watch handler.
 //
 // Note that changing props in a watch handler *will* trigger a rerender. To make pre-update changes to observed
diff --git a/src/internal/form-control.ts b/src/internal/form-control.ts
index 94c1bb70..5ed34374 100644
--- a/src/internal/form-control.ts
+++ b/src/internal/form-control.ts
@@ -1,4 +1,4 @@
-import { html, TemplateResult } from 'lit-element';
+import { html, TemplateResult } from 'lit';
 import { classMap } from 'lit-html/directives/class-map';
 
 export interface FormControlProps {