From 58941e93c396bf35becc7431e1743afbaad6dd69 Mon Sep 17 00:00:00 2001 From: StefanGussner Date: Wed, 10 Aug 2022 21:08:12 +0200 Subject: [PATCH] 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. --- packages/integrations/lit/README.md | 12 ++++++------ 1 file 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`

Hello world! From my-element

`; } @@ -87,10 +87,10 @@ __`src/pages/index.astro`__ ```astro --- -import '../components/my-element.js'; +import {MyElement} from '../components/my-element.js'; --- - + ``` > 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'; --- - + ``` 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.