Skip to content

Commit

Permalink
Update code samples to match release version (#4241)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
StefanGussner authored Aug 10, 2022
1 parent f8e3853 commit 58941e9
Showing 1 changed file with 6 additions and 6 deletions.
12 changes: 6 additions & 6 deletions packages/integrations/lit/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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> `;
}
Expand All @@ -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.
Expand All @@ -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.
Expand Down

0 comments on commit 58941e9

Please sign in to comment.