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 ```js
import { LitElement, html } from 'lit'; import { LitElement, html } from 'lit';
export const tagName = 'my-element'; const tagName = 'my-element';
class MyElement extends LitElement { export class MyElement extends LitElement {
render() { render() {
return html` <p>Hello world! From my-element</p> `; return html` <p>Hello world! From my-element</p> `;
} }
@ -87,10 +87,10 @@ __`src/pages/index.astro`__
```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. > 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 ```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. 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.