michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update code samples to match release version (#4241)

Browse source 
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.
This commit is contained in:
StefanGussner 2022-08-10 21:08:12 +02:00 committed by GitHub
parent f8e3853394
commit 58941e93c3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/integrations/lit/README.md
View file

@ -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.