docs: Update Lit README.md (#7960)

packages/integrations/lit/README.md

@@ -61,35 +61,28 @@ To use your first Lit component in Astro, head to our [UI framework documentatio
 - 💧 client-side hydration options, and
 - 🤝 opportunities to mix and nest frameworks together
 
-However, there's a key difference with Lit _custom elements_ over conventional _components_: you can use the element tag name directly.
+Writing and importing a Lit component in Astro looks like this:
-
-Astro needs to know which tag is associated with which component script. We expose this through exporting a `tagName` variable from the component script. It looks like this:
 
 ```js
 // src/components/my-element.js
 import { LitElement, html } from 'lit';
 
-const tagName = 'my-element';
-
 export class MyElement extends LitElement {
   render() {
     return html` <p>Hello world! From my-element</p> `;
   }
 }
 
-customElements.define(tagName, MyElement);
+customElements.define('my-element', MyElement);
 ```
 
-> Note that exporting the `tagName` is **required** if you want to use the tag name in your templates. Otherwise you can export and use the constructor, like with non custom element frameworks.
+Now, the component is ready to be imported via the Astro frontmatter:
-
-In your Astro template import this component as a side-effect and use the element.
 
 ```astro
----
 // src/pages/index.astro
+---
 import { MyElement } from '../components/my-element.js';
 ---
-
 <MyElement />
 ```