summaryrefslogtreecommitdiff
path: root/packages/renderers/renderer-lit/readme.md
diff options
context:
space:
mode:
Diffstat (limited to 'packages/renderers/renderer-lit/readme.md')
-rw-r--r--packages/renderers/renderer-lit/readme.md87
1 files changed, 0 insertions, 87 deletions
diff --git a/packages/renderers/renderer-lit/readme.md b/packages/renderers/renderer-lit/readme.md
deleted file mode 100644
index 969695905..000000000
--- a/packages/renderers/renderer-lit/readme.md
+++ /dev/null
@@ -1,87 +0,0 @@
-# Astro Lit Renderer
-
-This is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).
-
-Server-side rendering uses [Declarative Shadow DOM](https://web.dev/declarative-shadow-dom/), a new web technology that allows custom elements to be rendered to HTML with __0 JavaScript__.
-
-## Installation
-
-Install `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:
-
-```
-npm install @astrojs/renderer-lit
-```
-
-__astro.config.mjs__
-
-```js
-export default {
- // ...
-
- renderers: [
- // ...
- '@astrojs/renderer-lit'
- ]
-}
-```
-
-## Usage
-
-If you're familiar with Astro then you already know that you can import components into your templates and use them. What's different about custom elements is you can use the *tag name* directly.
-
-Astro needs to know which tag is associated with which component script. We expose this through exporting a `tagName` variable from the component script. It looks like this:
-
-__src/components/my-element.js__
-
-```js
-import { LitElement, html } from 'lit';
-
-export const tagName = 'my-element';
-
-class MyElement extends LitElement {
- render() {
- return html` <p>Hello world! From my-element</p> `;
- }
-}
-
-customElements.define(tagName, MyElement);
-```
-
-> Note that exporting the `tagName` is __required__ if you want to use the tag name in your templates. Otherwise you can export and use the constructor, like with non custom element frameworks.
-
-In your Astro template import this component as a side-effect and use the element.
-
-__src/pages/index.astro__
-
-```astro
----
-import '../components/my-element.js';
----
-
-<my-element></my-element>
-```
-
-> 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.
-
-### Polyfills & Hydration
-
-The renderer automatically handles adding appropriate polyfills for support in browsers that don't have Declarative Shadow DOM. The polyfill is about *1.5kB*. If the browser does support Declarative Shadow DOM then less than 250 bytes are loaded (to feature detect support).
-
-Hydration is also handled automatically. You can use the same hydration directives such as `client:load`, `client:idle` and `client:visible` as you can with other libraries that Astro supports.
-
-```astro
----
-import '../components/my-element.js';
----
-
-<my-element 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.
-
-## More Documentation
-
-[Astro Renderer Documentation][renderer-docs]
-
-[astro]: https://astro.build
-[renderer-docs]: https://docs.astro.build/reference/renderer-reference