Update code samples to match release version (#4241)

As I learned from a support Thread on Discord, the tagName convention was dropped during the beta period. Instead you need to export the class and use it in astro file.
I updated the code samples on this page accordingly.

1 files changed, 6 insertions, 6 deletions

diff --git a/packages/integrations/lit/README.md b/packages/integrations/lit/README.md
index 49b6b4b9e..a6abc0ee5 100644
--- a/packages/integrations/lit/README.md
+++ b/packages/integrations/lit/README.md
@@ -68,9 +68,9 @@ __`src/components/my-element.js`__
 ```js
 import { LitElement, html } from 'lit';
 
-export const tagName = 'my-element';
+const tagName = 'my-element';
 
-class MyElement extends LitElement {
+export class MyElement extends LitElement {
   render() {
     return html` <p>Hello world! From my-element</p> `;
   }
@@ -87,10 +87,10 @@ __`src/pages/index.astro`__
 
 ```astro
 ---
-import '../components/my-element.js';
+import {MyElement} from '../components/my-element.js';
 ---
 
-<my-element></my-element>
+<MyElement />
 ```
 
 > Note that Lit requires browser globals such as `HTMLElement` and `customElements` to be present. For this reason the Lit renderer shims the server with these globals so Lit can run. You *might* run into libraries that work incorrectly because of this.
@@ -103,10 +103,10 @@ Hydration is also handled automatically. You can use the same hydration directiv
 
 ```astro
 ---
-import '../components/my-element.js';
+import {MyElement} from '../components/my-element.js';
 ---
 
-<my-element client:visible />
+<MyElement client:visible />
 ```
 
 The above will only load the element's JavaScript when the user has scrolled it into view. Since it is server rendered they will not see any jank; it will load and hydrate transparently.