From 37e18a9160e04e17a3ae3f4631cce12a8cc9662d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elian=20=E2=98=95=EF=B8=8F?= Date: Fri, 4 Aug 2023 16:43:03 +0200 Subject: [PATCH] docs: Update Lit README.md (#7960) --- packages/integrations/lit/README.md | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/packages/integrations/lit/README.md b/packages/integrations/lit/README.md index 1a71ce3c6..9fde521a0 100644 --- a/packages/integrations/lit/README.md +++ b/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. - -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: +Writing and importing a Lit component in Astro 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`

Hello world! From my-element

`; } } -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. - -In your Astro template import this component as a side-effect and use the element. +Now, the component is ready to be imported via the Astro frontmatter: ```astro ---- // src/pages/index.astro +--- import { MyElement } from '../components/my-element.js'; --- - ```