diff options
author | 2022-08-10 21:08:12 +0200 | |
---|---|---|
committer | 2022-08-10 14:08:12 -0500 | |
commit | 58941e93c396bf35becc7431e1743afbaad6dd69 (patch) | |
tree | 5dea9ba2801846cda60248e1d1d328cb8273e23d | |
parent | f8e3853394c2f2f48fac4b5eb2284e1960e59a13 (diff) | |
download | astro-58941e93c396bf35becc7431e1743afbaad6dd69.tar.gz astro-58941e93c396bf35becc7431e1743afbaad6dd69.tar.zst astro-58941e93c396bf35becc7431e1743afbaad6dd69.zip |
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.
-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. |