diff options
Diffstat (limited to 'packages/integrations')
| -rw-r--r-- | packages/integrations/lit/README.md | 12 |
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. |