diff --git a/examples/framework-lit/src/components/Counter.js b/examples/framework-lit/src/components/Counter.js
index 063d338e4..d98a02a53 100644
--- a/examples/framework-lit/src/components/Counter.js
+++ b/examples/framework-lit/src/components/Counter.js
@@ -1,7 +1,5 @@
import { LitElement, html } from 'lit';
-export const tagName = 'my-counter';
-
class Counter extends LitElement {
static get properties() {
return {
@@ -31,4 +29,4 @@ class Counter extends LitElement {
}
}
-customElements.define(tagName, Counter);
+customElements.define('my-counter', Counter);
diff --git a/examples/framework-lit/src/components/Greeting.ts b/examples/framework-lit/src/components/Greeting.ts
new file mode 100644
index 000000000..69a43a650
--- /dev/null
+++ b/examples/framework-lit/src/components/Greeting.ts
@@ -0,0 +1,14 @@
+import {html, css, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('simple-greeting')
+export class SimpleGreeting extends LitElement {
+ static styles = css`p { color: blue }`;
+
+ @property()
+ name = 'Somebody';
+
+ render() {
+ return html`Hello, ${this.name}!
`;
+ }
+}
diff --git a/examples/framework-lit/src/components/Test.js b/examples/framework-lit/src/components/Test.js
index 182755c79..49f159d47 100644
--- a/examples/framework-lit/src/components/Test.js
+++ b/examples/framework-lit/src/components/Test.js
@@ -1,7 +1,5 @@
import { LitElement, html } from 'lit';
-export const tagName = 'calc-add';
-
class CalcAdd extends LitElement {
static get properties() {
return {
@@ -16,4 +14,5 @@ class CalcAdd extends LitElement {
}
}
+const tagName = 'calc-add'
customElements.define(tagName, CalcAdd);
diff --git a/examples/framework-lit/src/pages/index.astro b/examples/framework-lit/src/pages/index.astro
index ec4a7f73d..8ace9f331 100644
--- a/examples/framework-lit/src/pages/index.astro
+++ b/examples/framework-lit/src/pages/index.astro
@@ -2,6 +2,7 @@
import Lorem from '../components/Lorem.astro';
import '../components/Test.js';
import '../components/Counter.js';
+import '../components/Greeting.ts';
---
@@ -15,5 +16,6 @@ import '../components/Counter.js';
+