{"_id":"@astrojs/renderer-lit","_rev":"65-bf09a91ad706a2a47610a429aa48d6e1","name":"@astrojs/renderer-lit","dist-tags":{"experimental":"0.1.0","next--compiler":"0.0.0-compiler-202192918241","next":"0.4.0-next.0","latest":"0.4.0"},"versions":{"0.1.0":{"name":"@astrojs/renderer-lit","version":"0.1.0","_id":"@astrojs/renderer-lit@0.1.0","maintainers":[{"name":"matthewp","email":"matthew@matthewphillips.info"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"natemoo-re","email":"nate@natemoo.re"}],"dist":{"shasum":"417e1ba3db1ab3e349038eac1ecb00387950b139","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.1.0.tgz","fileCount":6,"integrity":"sha512-TJIULKmQ16qoH6sGWjTr0RkM5yS8rt84lA6dnfLYCX8sdi+5kD4bm6tcH8JHdX2onqGWNQRHe8mx8IZtW+BW/g==","signatures":[{"sig":"MEQCIBkS7LvK9g4jDBt6mLXBF40IVvWEz59jjQUFzktDXx3aAiBVPpTTJzwx9mUCdTMBcIcK3LlKGGlOukz4oZ9aHhQH4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7YyCCRA9TVsSAnZWagAAdbEP/1QA1AiA1gzEHDeBOId1\nX+Q5NAFBnkMOQq8okBxnSnH/fmqGiA1DWKu80pDuvwH3pyMVZ71khSo/qeMZ\nVBvVizwcmKV2vQduJ1XKFxVC4ppYz1Mek+r5vDQKwzPl2gBeVVA4XYkNwBlH\naj8HoulJNmuHapRgrWdtuKABcjdsTeD3QIlNcNO7qVKEpEMMBF2HvEcAo/1V\nUdv4ykHWGWP16KXIERpk7r1mt4CVXypiGzY9rVJo6paE9rgtznf9r8mcDn2I\nYp8tL0hVCDq3kCmRcYnH5REomR0EoardnfHDq+6YEyriA8DJRKTvf4DLguJF\nMG7vT2jVXilTc2H13FT+B0F8KBtRHPiTc++fJaG/bB+YizXJsvDMpjE0hKsJ\nRbmTYM5IEHwwY83FcLvcNZXFn1Z5Egg/5z+hXr3OSBBHtEiMGyTsiKhPfK+N\nb8OujN54ZxSvo2pbeJAcuIKvF9g/vMXdspn9PmTjLHo2KdJNbXhr2mdIaHW9\n++vJz8JqF6CLOEsozjDvSvj32aCM5AB1iKcHvhWtu6g7UioM/TfmPHYXLsLv\nFazXVR0VrwswDGKu0mNEF1RJX0iWOqRwA3Oz8mqW9I6MsVNToDeclow2tijF\nzI+leZEkBUZ72G+D8iWwO0klfPTYqIq9tXce43Pljg2ynVMm6BNUemGYZcxT\nOYPK\r\n=dxki\r\n-----END PGP SIGNATURE-----\r\n"},"type":"module","exports":{".":"./index.js","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"scripts":{"start":"node server.js"},"_npmUser":{"name":"matthewp","email":"matthew@matthewphillips.info"},"_npmVersion":"7.18.1","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.4.2","dependencies":{"lit":"^2.0.0-rc.2","@lit-labs/ssr":"^1.0.0-rc.1","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.1.0_1626180737955_0.28149158574664757","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"@astrojs/renderer-lit","version":"0.1.1","_id":"@astrojs/renderer-lit@0.1.1","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"5d34ecc09daaae6dd33b891e65ebb8cc53cc4af1","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.1.1.tgz","fileCount":7,"integrity":"sha512-WmqpS8jc3D0kqOJGzWGZz7VuvDD25DBE16OygQwO51j0dVeNK3VxcELbwIb4lc+h1JmlncTWlYyuYA3AvTVm1Q==","signatures":[{"sig":"MEQCIA67I7eIpiTyGxsQ9HtzfX/SWSYElZaB3dpPxhozdhLJAiAsLa3jT2Gt4NSXC1SOj+MQa6row3cXnfLGhTrjYP0p3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQT00CRA9TVsSAnZWagAACMgQAKMHaS2POToUidLohdyf\nZuh0IKDyu6RkadBMrZ4T3v+ugrO3oKsgFhHL05mBOc4QWKvRB59VgL31UzrB\nI9HKr8P5ePmBC8oX8MOt5LLZnbjSi6xX6K5hC/spleBgkAvEBkbu9A1DMj6Z\nRuxWr/j3sVBST2V2b8Kw3EBZoSMjbCinlFARS07uOVmpD2nZFtOCVAXmZm9Z\n9v5s/vmxYmN/yGn0HpAkCEMI00voDTpgTvc/NF5oGqpQmGyWTsevc4nGXDEO\nmqENoQdlrFHpkrKiddxegxmnp+YDoCsD4FxhuGRZfXkHO16GLhi58Alt5E52\nCSn/FyMh54e9LV+pi5k/U0+F8v8O18eMOhZSRQUn8z7WL6WCHHDM8KWYPZSR\nutQ/1ota60urT3ze04P5kmXgziWLrnFJfZ5ND3TFlIvWNcSGiyBo7sVUW+4j\nT+cyNysgjT2N3QeR15ejA8HgaV/M1RpzNeESDrsCVkeL72BNS3CbynKgaHJT\nwmQ7YdlqzVLlLRgoTtpnHaQuGwS1h/ayXtVwbDDR+HNSnZkGEV3Oe91cbY5/\nNS2naEsREeXgqtQ7XxjLtYmj6DhrmN0f11KaNbzb9Vc2TANpulU9++H21LY5\ne1dbPQzuYdY7mvVug5xQwPBzz+z/ZcexFt4Y9zw/YFCOwjATYZksAUevJBqJ\nGlBh\r\n=EjSq\r\n-----END PGP SIGNATURE-----\r\n"},"type":"module","exports":{".":"./index.js","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"scripts":{"start":"node server.js"},"_npmUser":{"name":"natemoo-re","email":"nate@natemoo.re"},"_npmVersion":"6.14.15","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"14.17.6","dependencies":{"lit":"^2.0.0-rc.2","@lit-labs/ssr":"^1.0.0-rc.1","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.1.1_1631665460471_0.5327635189594144","host":"s3://npm-registry-packages"}},"0.1.2":{"name":"@astrojs/renderer-lit","version":"0.1.2","_id":"@astrojs/renderer-lit@0.1.2","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"cee76a32f7278af1659996c799f4bb804618f2b6","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.1.2.tgz","fileCount":7,"integrity":"sha512-5udIINY+eeUvSDpfmC94wYeIsVUCaqOYWr4m5DHmlXxSVC1d8bX7QLJgiuuD1dX5zex/7HY4vLNZYxcA5Z8C+Q==","signatures":[{"sig":"MEUCIQCZ8ZYAXgDdYI1hEn4Qco4UI9JRNhL/lbKmR+e+vSWA5gIgZsI3R8mYnNQQJHz32EIy5Jvau3czUf4tIh+8K5+Y6Yc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6209},"type":"module","exports":{".":"./index.js","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"6.14.15","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"14.17.6","dependencies":{"lit":"^2.0.0","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.1.2_1632857771842_0.038633841174413375","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202191419857":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202191419857","_id":"@astrojs/renderer-lit@0.0.0-compiler-202191419857","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"075328319c96837def8dfc586d2b9d770496ab04","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202191419857.tgz","fileCount":6,"integrity":"sha512-Hu5jzwL37iO5hyJymLmXPeJGnfTi5X6rbEndqlBi60iDC0VEZhSlLhntPJ6D/nIpS+Me2L+tpC/9KgrVttCREg==","signatures":[{"sig":"MEQCIDAOrTzNwUIcXUIKcpltgB/1vKc+XtTUeJLjmDviSZ1dAiArHxOv8V1fcgFjGJfAhyDa6UVYGV0FNTwfHUHYhXlskQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6070},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"83528966321116ee00d376852c62471bdff7d87c","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.0.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.11.1","dependencies":{"lit":"^2.0.0","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202191419857_1634238614091_0.5790214787027705","host":"s3://npm-registry-packages"}},"0.0.0-compiler-20219160298":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-20219160298","_id":"@astrojs/renderer-lit@0.0.0-compiler-20219160298","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"533b2b03597a4bb9bf805667a8f6ee095a065357","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-20219160298.tgz","fileCount":6,"integrity":"sha512-aEFbAxX6mlLbnjF80eT6sUSRHC5JYwvvhP7X7urwWWJYkpoRo6HK9XCGIZOTc/YYXhN6M0xJQHIW/6ho2gDLFA==","signatures":[{"sig":"MEUCIQCEEh+goICYSmJsquy3wLUZMeatoISeXKUk6f30Dx/saQIgT4FS3QJehzD3rxCKI6Zkc4rCZisx57iptAPZThl1H30=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6069},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"8145dc042c1e940c66b21d74541e9e12118fb5e0","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.0.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.11.1","dependencies":{"lit":"^2.0.0","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-20219160298_1634344220477_0.4247221799030618","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021918182157":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021918182157","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021918182157","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"07001d61b78d6e6e7c10c1272a1a35194c4b566c","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021918182157.tgz","fileCount":6,"integrity":"sha512-KON0CrGqAb2zjjJW9n5/K7Hz0WASih3HGYn51eCPZ2G0A+oavTElKt/n16oRFyHoJvqc6Dm3wMsk8sgsQHR5iw==","signatures":[{"sig":"MEUCIE0Si9SevNlSXYsbXAoUZ1f1BjutRdzlZn/yftFz/N0pAiEAzsg2A+mBeG4cbUMhEt1ppp/LJecv8SE4/qrbGLZMHuI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6071},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"d6c859cfaa93c4af669e3171a6153ed2bee6b52a","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.0.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.11.1","dependencies":{"lit":"^2.0.0","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021918182157_1634581395801_0.2911332193138849","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021918205521":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021918205521","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021918205521","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"f5c54c8ff4b7458ae607e076ee14d1e2e20dc1e2","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021918205521.tgz","fileCount":6,"integrity":"sha512-aIlZkFUq2wJUqTToRaw4rCU6m8Q/9dtijvcqo7nlHzMWuyJm7iSk5SK5b6mazoRvFq1o0qeXsXt9yGzd2dGIyQ==","signatures":[{"sig":"MEUCIQCoqLTyqXIT7SvYkmGLVvGZ7W7MY5t4OhE9aEsrk81/1QIgdoObQgpaEvbiCW7hLFVNgA3Qa3JxG2Kkb7Ck9/AaquM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6071},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"2dedb042e3fd3e352af61fd8d7c98a135c17e432","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.0.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.11.1","dependencies":{"lit":"^2.0.0","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021918205521_1634590598514_0.2609196689500164","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021919122335":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021919122335","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021919122335","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"5d2345e949a97bf3a35a8ecc93b2c082156b125f","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021919122335.tgz","fileCount":6,"integrity":"sha512-1r1KlJZhx6ZkD4rf/rWZ66TkeFB0r8iJFg0z2YJfDtnDTm4Qvo1vzRDwNCJHvVCEsUnaxub63Vkmjv7nUPHKwg==","signatures":[{"sig":"MEUCIFt51Z/f3kjcgpPDbayHwp7K6DcQQzx1slEPJfe2bFb+AiEApvxKXWYbCrQ7Tzqg90qeMLHe1D3VKlzDwGuc+RNZn+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6071},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"0eeb2eb3c2af23c1ac5d578bb048bcf9c54f5598","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.0.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.11.1","dependencies":{"lit":"^2.0.0","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021919122335_1634646289933_0.28216457767405223","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021919144253":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021919144253","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021919144253","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"27b0ebd343afc598d9fe6f960024daab821a639a","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021919144253.tgz","fileCount":6,"integrity":"sha512-YyCXHTzI/9kbqw6/surHhIbW91ZVRuUkOa2+Geu2I+t9Acqokc4/7md/mDvoszAo3Fx4xDPzfMRKuQsB1LOZdg==","signatures":[{"sig":"MEUCIFYPy+9O8GUa9faqYIFmdQ0K+Y3NKunwuf1bL7LbhLgiAiEAnR0KUICzHgkpu/hIIVpXWpvTjuND4JTBoLvawXys6XU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6071},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"0bf01488c7008be791a60b9fd848c537b5fce8dd","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.0.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.11.1","dependencies":{"lit":"^2.0.0","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021919144253_1634654627613_0.13685963145320001","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021919173559":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021919173559","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021919173559","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"e70e93afa26222d5f7ac439281744fbba709886d","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021919173559.tgz","fileCount":6,"integrity":"sha512-o4TtJ44p1Eo3TeiasmtYxLbdmFmdrc9Y4Xcb+K4GDddtIguZdjZBi93urgwL+XyRUYnnBvyndWghwYgVcoC9jw==","signatures":[{"sig":"MEYCIQCbgBVuuNHYM+sl80s1qyz6SX2A/M1we0KtDr2L8KH/KwIhALg6+zme7h3AioG0z2xWwjR+4xPgai9lTSsTOwtjKYo0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6111},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"96229ff56eb2828a66ae3f773fda17ee4c49f83c","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.0.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.11.1","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021919173559_1634665022300_0.9516495890140546","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202191918936":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202191918936","_id":"@astrojs/renderer-lit@0.0.0-compiler-202191918936","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"e310ff0ce22daf381baeb47d8be7f790e83d12dc","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202191918936.tgz","fileCount":6,"integrity":"sha512-RQ/FjAa8jmJIRrOo1vsvRCoybXdXHP6F8xfWWtwZYjsl+Hpv/ap9qfwj0FsT7pF/1jMraNpqZj1plLFzkFS5jQ==","signatures":[{"sig":"MEUCIQDKcWpOyXaBAPlVeyO000qtUnIkKIoF1h2T0pW0UEo+TwIgJ7VpIcmcu+caPepcLLEVlg2Z2re18koUuF4vgKC2Ok0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6110},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"e354b76624d4190c0fda005664f4ba247654669f","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.0.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.11.1","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202191918936_1634667031593_0.2720835911489121","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021922153359":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021922153359","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021922153359","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"59ab176be29a8bd59847d89baa45fc72dd496449","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021922153359.tgz","fileCount":6,"integrity":"sha512-oyQX2LMgQvbB+CVxo0t9ux5JaLOYAPgBQqcgDaUfpd+6snTAu870GJJn9aQtLs5UscOA/S7H7C0hqaiyw6VGwg==","signatures":[{"sig":"MEUCIQDzno3L3KLOeKF2qslR12sYKQoxhE4hJgYnFea+gAR8MgIgD3gwnL0n6xld9BnjNl36VzWY86cIIPgN19ss2y3QEvY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6764},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"fc4d137bcb4c9bf1991c61c8764f2d45880f7462","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.12.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021922153359_1634916901297_0.8648480780085948","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021922171217":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021922171217","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021922171217","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"37274d0d51ee0218a2be094471ee436c0e724fd0","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021922171217.tgz","fileCount":6,"integrity":"sha512-P+BiG7floYfgLurkvZc2YSKE9yc27NkNFejV4VSI5WRkkJQIQ9C0Jk18uaRq13GDK3UaxcTZCjtgu7sZio6Q+g==","signatures":[{"sig":"MEUCIQCwyxENixkFWF3a8isg632N71NweSIzi1y51fl7vxsNEQIgLuj7wuPHTO5YCt+iLyJKJh449soFQceW4ZKwlMkN+l0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6764},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"8d69a36474fe280703cc0a582c49e192cd1d3bd1","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.12.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021922171217_1634922783701_0.5877736990758582","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202192217569":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202192217569","_id":"@astrojs/renderer-lit@0.0.0-compiler-202192217569","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"e09b38ed73586edc677e2ccd74c8987c839adb64","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202192217569.tgz","fileCount":6,"integrity":"sha512-RUjQTGzEQuKNG9Zcn/XTrxTr62vko7jGlKq4WS2GV0LhlwiWTpNG9CvZ8aGZCbjGATK0d5e8c1I46ipqEWi3jw==","signatures":[{"sig":"MEYCIQD0tuzAe00ExxmD2v9p+i+dXkA5IUHtczcYp5vzCqEmPgIhAIHOkDSfUivkn78RESqv+18cnn1I6EBnbcJrBtUcr6HW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6763},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"eeb15a85ebf63ea0868335591491c7bb248ffc35","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.12.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202192217569_1634925427599_0.8807923872945436","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202192218225":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202192218225","_id":"@astrojs/renderer-lit@0.0.0-compiler-202192218225","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"b743f7bf25d4436edfcee5d53b281db4f7ce1bf2","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202192218225.tgz","fileCount":6,"integrity":"sha512-iy9FSXElGyhFnseCOMz16r3sO+72xl7KbLbYaDTmhAhi2cbvR8CU6dQVgh4NFOArZiGrE1NAQSQPQgVp0UEFNQ==","signatures":[{"sig":"MEUCIQDJc0xe+34oExfYvZQmVpyE/gbkrdnMyvLOFNt1ZLn9PAIgHtoc0kbXvryhdqtVpiIGhUk5C4Ti75cwOX+/P+Q76VY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6763},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"f8ea821488275dad6d7e6bbad5959a0772ab7a21","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.12.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202192218225_1634925795011_0.7504874633741705","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021922182313":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021922182313","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021922182313","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"b2c534f560cfe17271661e9355eb7a6d964d428f","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021922182313.tgz","fileCount":6,"integrity":"sha512-wOPtd+W2t8NY+d2MF9Kxrz1nWQsyH1gFYAEHuiVxmCGtSSp9MkYANeEtmskl7fx0NJ4c7YO/Evxq/u/58KQAxA==","signatures":[{"sig":"MEQCICIP5w3Sljbp7Q+EiIeSZ9AEJLjg9dW922fp56OUV2njAiBYXkurRzPYmezrNIijf+XrIzCkzyRd5D7ZPOc251CAKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6764},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"4d71b15c149a2a06e77bba13c48974688eaeb2eb","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.12.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021922182313_1634927040883_0.6200079637681137","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202192219270":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202192219270","_id":"@astrojs/renderer-lit@0.0.0-compiler-202192219270","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"12aead99e9b6b4b3ab4048dcb4f1b937fbd2ebbf","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202192219270.tgz","fileCount":6,"integrity":"sha512-ct7s1QeIuK7nR485mPtM8Fzr7Rau/qkNQmi5/uud2Ybkytuomp0T2EiFHawp+2X54olBbga5W2M8RlGxpsspcg==","signatures":[{"sig":"MEUCIGnIWQR8lHy88amPZPZx9LzXEyOs/dvXUbUgrXToY9A7AiEAmOjvQQzwz0yhHEa7iVU6PsQG9dJ7oIUepOPr/WGlzGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6763},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"0dbe3fdc8502e9a3068caae30e65c7bec8a82a4b","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.12.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202192219270_1634930872435_0.18287613581386308","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021922192928":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021922192928","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021922192928","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"8bb67044f343b6f80bf148a496c82a2762404d46","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021922192928.tgz","fileCount":6,"integrity":"sha512-u8JaG4tMhcB8gS1Gpwqx0Oh0cAVSH443gL3r/BIlEDvkmFC0/1CnTmdxkcIvM2JZiszrySfVbVrWrpcbtNq2cA==","signatures":[{"sig":"MEUCID5LDOE/89Idfrm24qM0QYAN+N+LXCguU9baDao14Ll7AiEAoJKprkDzL6JFthczL/IV2Hfb5WsAVN7zLiVZ9S2yOpM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6764},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"5e440bbcde289714db3efa2edc313c90d3b8954e","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.12.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021922192928_1634931020910_0.07149388333272677","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021922193128":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021922193128","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021922193128","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"b2d66b102d1575b35e9cd33e9c6a470827fdd6e5","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021922193128.tgz","fileCount":6,"integrity":"sha512-5NNSr05V3xQPy2nvqF0ANreLE0ZA6247e673B5xUSmY+dm9sw64zx3DPwogM062iEqC4TtuUVcXvy01z41ZY8Q==","signatures":[{"sig":"MEQCIAVErCxW6VVdOcvWFK0G7uHEYHDMyQpOlnmXEgLxMFM5AiANyCAJFT6XUyvdBLM1RQIqz2Zv7EbWuHqgfque9Oqw8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6764},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"02c71ce1d840aae3aabbcedfa69e630c4518a9df","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.12.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021922193128_1634931147972_0.054595118253846886","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021922194124":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021922194124","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021922194124","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"4c1b77ffe0c87b7229e340da1e704eb7a0d60c71","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021922194124.tgz","fileCount":6,"integrity":"sha512-w/hFcHO54PLVtu/bq0y+3fc+WTC/K82Hroiw2PnvwIlH+Z0uLJojlBh37iBkrRoSQjpDfs69TUtetFUr04QaKQ==","signatures":[{"sig":"MEYCIQDJs9MqZVpQNNcOWuO22xvBB4VPraJFInzdr1C5IFKgLAIhAKTyUfc9yu+YcYTQTF+AwgBnyi3YB6lmMTOfJtQ8stcu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6764},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"2f43bdd0f1af59ac833faf5d20f0a5fe025d3125","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.12.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021922194124_1634931734864_0.45678164518568454","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202192219476":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202192219476","_id":"@astrojs/renderer-lit@0.0.0-compiler-202192219476","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"c075e8c6dcfa1a66977b09615149cd40ed169258","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202192219476.tgz","fileCount":6,"integrity":"sha512-jTlxPhmmLGH/53kYql94m1deK5LxdR5odp4RadwSvlHdta5zwslMuO6lULeJ90AVImXp7hX04MppwemNc8Y/dQ==","signatures":[{"sig":"MEYCIQDpPCMdMYF35fuI7tg03XoUTWHhtd+pHAqYXKLJJc5jEwIhAOSbzusq+IB+KUK6WmFaExS29E/HiI9EBdg3GOUtiDdZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6763},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"2c1d85e25c683b987b177cb816497cec2a442bf1","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.12.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202192219476_1634932087252_0.6332845251731769","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202192222271":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202192222271","_id":"@astrojs/renderer-lit@0.0.0-compiler-202192222271","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"5bce359457d0e21704204201f1ebe8ef019918a5","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202192222271.tgz","fileCount":6,"integrity":"sha512-MtbxpyIxNZiqWRzKjN0kC32IrnFpEyGSpX0QWZdSRyHWKzjtu1PTmF8lAR2FqBunurI275r/sJWYcdXo/OidcQ==","signatures":[{"sig":"MEUCIBJk3WAyTKHKiEpynwwoPje0GH+pG0HyeMt2vswaxpbSAiEA4+Ff5jXaRqd7sx7w4cSBYPh0XxMnOn24Xosed4vmq3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6763},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"8206421ffa46eeb5f078b7b543675ec10ae45c61","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.12.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202192222271_1634941684371_0.9595510762088395","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202192513412":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202192513412","_id":"@astrojs/renderer-lit@0.0.0-compiler-202192513412","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"561308796b6bbed53680d1309e385b2ad64b8329","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202192513412.tgz","fileCount":6,"integrity":"sha512-ZUitbM1J4c8tUbodtN1A1Lldd5O4QddLK4PiPDeokPBn4D/HF/yh+oCJ4UQJCOkMLTDXeteFf8xkXcwHRLBtvA==","signatures":[{"sig":"MEQCIBKtJV1QmRBxDgaSCpvGMzR+qfijc1Lzw7rBRC3jiyAMAiBng8s+GB2uEKquKBnEebdn4DXFIakZkdZCE5V67qJueg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6763},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"7f95d706e94401c12f1196c2c132da0219fdab73","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.12.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202192513412_1635169311986_0.6589969747256448","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021925165634":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021925165634","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021925165634","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"b08d669580bae286be27544d48887b7fc6ab9720","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021925165634.tgz","fileCount":6,"integrity":"sha512-chIPMKDQ7YsQWcTYeedkVkbvvM8Btpb154iWwNpauCwkYPY1vj0Vr90pyrK8g2vUEySJ1ATJE+osVg1M8Ngk+Q==","signatures":[{"sig":"MEQCIHLXtF+4U8Iz7Hwtr24pQ2/tkqIMLAm2OWxnbtGPhF5HAiAN5uuKUg1pXG0L1EuhUCyG8S9k3nBge7F5rc4biE3L4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6764},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"190e03b5ced53dee44c401d48fd4b9efaad8c63a","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.12.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021925165634_1635181060459_0.5681422692409177","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202192518234":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202192518234","_id":"@astrojs/renderer-lit@0.0.0-compiler-202192518234","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"db37c25dfd38413681d5e965d185cb4d073273ac","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202192518234.tgz","fileCount":6,"integrity":"sha512-ZmPhIpbQQKSms8I9nm4i0/BlNBXS34T1s4NyKsZJLhuMugK/gMM+LSGI8esdDSkzOEgYOOKxaxkqAiFCvtNEUg==","signatures":[{"sig":"MEUCID5JkWrDsL1R3GOPE/1Dod4wXCbD2/i+eHyzxYfZtkUEAiEAvKAdmmRAKic/u8BbQr9CeWbTYZ1p+SvnfA+itpBHxY8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6763},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"303f32fda0bdd7ecacec3fed5594d736db5e6f6b","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.12.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202192518234_1635185001372_0.6629011280590458","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202192518814":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202192518814","_id":"@astrojs/renderer-lit@0.0.0-compiler-202192518814","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"a1bab4354cc159e041dff56917ca20724c47fdfe","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202192518814.tgz","fileCount":6,"integrity":"sha512-3SSKE6HjzaI3ce0jho5Fy6Ql7ON49t0g9EtPzbIZCcfNrJjYLkCMG8L83k+4fhZvQ/kLKD7tIKLUF8gShD6AJw==","signatures":[{"sig":"MEYCIQDDiwc1iDGHooDkB40+yZu/tqkrH8i/I8zKSsAx5YXFYwIhALegjFIhO0IBbPuVNUhWqyyFyUZ3jFmyPLP/2TdNBc3d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6763},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"1103cb1f9d2a2077f65a0d08aee67ee9bf0e9540","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.12.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202192518814_1635185356732_0.9151718150265997","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202192519628":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202192519628","_id":"@astrojs/renderer-lit@0.0.0-compiler-202192519628","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"1eedee9bfa318a188fd2986964813ce614170fb1","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202192519628.tgz","fileCount":6,"integrity":"sha512-jnT8H8vVneNcXBUxLLv+JhPxpoq9vaIkFpTCsXJ6aRzRrMeZ2xvy6o6hN1jmLwgqBzd3YeFBVdzobRfAcVrrHA==","signatures":[{"sig":"MEQCIDGjkaSQaENt1aa93quwCgEvw3fBvw0PRGDpgWRcpH8bAiANqr0iumrXlh/hxLVXbFA7JzOI/1GdMbwaRzuv6px7wg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6763},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"07f786096d2f554c91267db8a18d89949dad1b32","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.12.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202192519628_1635188841166_0.4765558125886693","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021925192442":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021925192442","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021925192442","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"20bfd7df3edec6546194d7656edf23d8bb0d469e","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021925192442.tgz","fileCount":6,"integrity":"sha512-BcFRe5Z8N1ePkfnOwlWmhxL6zoZHWi8JYqPYk9Kgl/ReXrZWJB556gXs1787FAYSiThoFD1NnvbQmibhgLYqZQ==","signatures":[{"sig":"MEQCIBRU/H/fhCbfvtLRGQNBhj9+eD0qE+2fHXPuHuXHKGi2AiBSq8SiW1QewYvxE8OgqaZAFL0nuI/vAblO6VtJb65yjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6764},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"0430c0e1d237bd307f48ca5f459ca38bda2465b1","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.12.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021925192442_1635189946083_0.8318706943124774","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021925201936":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021925201936","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021925201936","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"b5a77aadac79b00bc3c048dd85be218ba376b06f","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021925201936.tgz","fileCount":6,"integrity":"sha512-Oy1PNXk69iU8WFmIERBz6iYaW5jKMb3pqjZf2U8AL78b6fzPWlpFVCA7duOSw94ttu3hd+LZjf2IYxCfZwnpig==","signatures":[{"sig":"MEQCIBm5zWekRLz3IilmbN71ZTqv4BkFZw40+FGbT75ZF27qAiAlR1Im6meik3PmIdEcskg+gekOcntPNiAOGawyoW4v4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6764},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"aa0590afdf5f687353ba339dfde6784567a4dd55","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.12.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021925201936_1635193238469_0.10220332705677171","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021926152628":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021926152628","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021926152628","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"b31532967ad1657dcffc02c74894aca4fac47a74","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021926152628.tgz","fileCount":6,"integrity":"sha512-QDLc63lPCDCmESCJpqNu7b/+5FWi7ClWFkDYsU5rhb6X1xUW8wZAqHjPun9BaOYOQhPAvJ42ciFfa3+7LWy8cw==","signatures":[{"sig":"MEQCIEJym1rDnPZGuSTTVW+txaK6ivEjwSbWyKSOEkymmrGCAiAjcsK9su+Ly37WJBOTS6hrcV0ngoIdNvcU5omF6/D+sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6764},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"dd4061703801fda14f14ef940a219ee68ec6e40a","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.12.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021926152628_1635262046185_0.11253799206868997","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021926155820":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021926155820","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021926155820","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"1e3b601dce2c9c105d238291b6e19123ce5f69aa","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021926155820.tgz","fileCount":6,"integrity":"sha512-HWeohPPJqtThbwChYqsJcAGyvJobSlVAOrzCptHlERkDuIZYw0okBQ9usvy6LPDRGzAW+ge80Ic1rUzOR069nQ==","signatures":[{"sig":"MEYCIQDw1c36jk8OSZbibF4z3hhJ7GhNGrj6oFomjQHxdMEYJgIhAJjscV72Zeiunshy2URZaYPAOtjiEKhxb+AsumLpInQr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6764},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"c85c7e2188c5e385f97bf43a3ba822c8e23a0e8a","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.12.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021926155820_1635263958410_0.4110993175320039","host":"s3://npm-registry-packages"}},"0.0.0-compiler-20219261822":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-20219261822","_id":"@astrojs/renderer-lit@0.0.0-compiler-20219261822","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"17e39b31bd31030c1591b4b5528adce8bc4ba829","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-20219261822.tgz","fileCount":6,"integrity":"sha512-fr2tCM6jBFEnrvE7rZZ1eF8QXfIF/y9KVhLOFB0CvHB//Kp6+4x7p5jyZG4wW2mEinuZO9ea3oWClbdd9HgORw==","signatures":[{"sig":"MEUCIAyfPeJsd/BQEb/G1GILzrnpALFVTILNr/F7QlY1rkDkAiEA5RZSZ6BR+4sHiORVKnyXfabI24ZfGHkWxoKEbMKyKig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6762},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"55c8453fd26f3e0cc2c83ae8240c69fd08816f7d","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-20219261822_1635271379717_0.26097990226914436","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202192621387":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202192621387","_id":"@astrojs/renderer-lit@0.0.0-compiler-202192621387","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"cba7a24a8aba59674ae39fe9723efe9bbf5c4868","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202192621387.tgz","fileCount":6,"integrity":"sha512-3bLPMxlCLP9H/4eKA12bQC6VKky8q6Wyzj3/AT/F/l+F8ZEPo6GO2kA1VjjBlrv+X4rHbkuJ4splwSR/zrPBNA==","signatures":[{"sig":"MEUCIQDiqwOxmXha/jajbGDp68CmoR0t7H/T3LSNfGMpXMiArgIgbuyxCRdn8nHW+mVX0rXX/FEmg9whhEfrtKeeoSXfg9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6763},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"8f699e5a427a68cb2e0ffb9048afc398b49769ba","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202192621387_1635284352336_0.6611821312406068","host":"s3://npm-registry-packages"}},"0.0.0-compiler-20219270206":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-20219270206","_id":"@astrojs/renderer-lit@0.0.0-compiler-20219270206","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"907b37781f897b850af867b2a59652fbef3e9c27","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-20219270206.tgz","fileCount":6,"integrity":"sha512-wQgWULLObItrHp3iw8cY4xyOfp+1mEMTWtxL3F+t1rVlzpgoItlAirdXz+IegADC6P3V6hP6sKM+x0uKKNXUeQ==","signatures":[{"sig":"MEYCIQCRVsinQE2EL37VGIx2+n14M4Ga9y1kv3D7ppJOFRqbfwIhAJE/18IsfNmd8yVOIHrWGIcitIQd6QBQQtWeUgzyboIA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6762},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"b04d478b52db81c745af7fc78f3b491d346fdfcd","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-20219270206_1635294066152_0.859587846731044","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202192721226":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202192721226","_id":"@astrojs/renderer-lit@0.0.0-compiler-202192721226","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"7b962388c371a2dbb7173469baca8d27450078f8","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202192721226.tgz","fileCount":6,"integrity":"sha512-P94ptUESPqQmqugwsQj1AWJsPuNQ4QmHeaBo7x1vrOpmVkLxd9A/T9tcSo2RnqyPwznsL4LOVOYwnmqZF0pLTQ==","signatures":[{"sig":"MEQCIGUGoJEGO8x5AYPrinInAa8Jc2Gm+ZzY8mJJ4FjpflN0AiBKDv4OTu4ALXFAKN8Tsm1d1a2UOjfp2qz0tpbw7Mh+Qw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6763},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"56f74e2bc80523049681b00db85f61d0540f32c7","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202192721226_1635300805128_0.8897993553857346","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202192735230":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202192735230","_id":"@astrojs/renderer-lit@0.0.0-compiler-202192735230","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"4f90f72433efe4c1b17b1d2a1f8a23c7b4d55545","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202192735230.tgz","fileCount":8,"integrity":"sha512-lX1m3HriLeMEfIkutQfCePdQVXnALwRm+kOyOeMbuJfNaxsWzGEdS6MEXbgCTtjlOmbmCa/NZQ/5pfcaxLOgww==","signatures":[{"sig":"MEYCIQCJcHlc8//Ktyq071sun2CCVcTMTS4MCEQV0fzwnVciIQIhAK4Eoj8nMkIvJ1rsNyPcRonvxf/mL1wUFbjsIYdPCQzB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7048},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"5477dc19c2da280146621704312a58e31df7888d","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202192735230_1635306804915_0.028675694692864795","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202192745537":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202192745537","_id":"@astrojs/renderer-lit@0.0.0-compiler-202192745537","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"de30c1f2752229461ad51bd2c986c382f6797a0e","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202192745537.tgz","fileCount":8,"integrity":"sha512-Rl3/CH5lUfrPn72i7FbgeyxIm/DEfG5YmbC+iteaQLfwTnv0hlQ2TuLQvSD0+nJaJ5THj5P/F7C8eo3JA2wavw==","signatures":[{"sig":"MEUCIDQAJTbryWmWACcb+S/mMVEP0KrCBs5BACzA4ReVU1kBAiEA2tpCtO8xIdlKNoXpb7dm7kcROZ5lYfqaG6XbM6ujyjE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7048},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"7f74388896e5763e5ecb6696a935270b450ab886","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202192745537_1635310586567_0.15591126656130383","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021927151937":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021927151937","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021927151937","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"db7e164adda5b9057d80c6af6d7d51fe81b80e1b","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021927151937.tgz","fileCount":8,"integrity":"sha512-woyYXG0jscutCI6bhhFMid/0jF7en47oGSD165r2JS2BvlTQTRSmk5ZasYqLizHOnu/ciAmGq/pQDLzTE0T4Tg==","signatures":[{"sig":"MEQCICBEu9qR5YbC+AoynZEYxc7ij30gs53mslKGcs2vhJwvAiBoWgQbyDKLVUP8aW+tUmBX7PlBVeAuVXHWNVJWzBbS0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7050},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"bd2ac13753e1b98cf0ff5e5a92967d518b818ee0","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021927151937_1635348024803_0.9427384062878157","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021927153828":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021927153828","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021927153828","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"b36f3f489c2a1819496597a4d461a90822904a31","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021927153828.tgz","fileCount":8,"integrity":"sha512-sF42ovjJv/38AWxhzuJvGNHcK7s80CArTekfyLYy4sNWit5jmJpIm/QgFIplOktZgNDKDOPONJNOrGtdPWh25Q==","signatures":[{"sig":"MEUCIQC5ZYa6j/e9ttny7MbAYI4gMaqMFpUtD5DjaYF/UX8e+wIgVgnVBKHySi8PboMizk42Ijl23kd1Lm6AyUP3DpJe/Ls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7050},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"62684dbe4bc714b52a4d4d3352910e3de267a2f5","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021927153828_1635349159375_0.5711518981118908","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021927154633":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021927154633","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021927154633","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"0b53333fcabe5d345109c26d338382d9787fa1eb","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021927154633.tgz","fileCount":8,"integrity":"sha512-jVrd7ZoejWzpxOia4Q01jI+FymC3z/B2gmsT/7BrFF1a5dJIX4b3WHAjYOMRtO9gk/HOljng3OzgEIcjdI6k8A==","signatures":[{"sig":"MEQCIAVSlActsITBCEWRGYGQzBPX6h5MFHiRcR+uAqtBXrscAiBpWuLo5okfP015gXqemasI6IODGxJq1kVtV/lbSw7Rzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7050},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"8c4720db3aadbd9c177c23854987549bc0b7f417","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021927154633_1635349643503_0.8458090357943846","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202192716846":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202192716846","_id":"@astrojs/renderer-lit@0.0.0-compiler-202192716846","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"ce1d031acc2f7b46367acd3490891e77e438aa2a","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202192716846.tgz","fileCount":8,"integrity":"sha512-30pGwqQoqSZ/SrCkNXTSjGfFF8wGG6mywSGisAzERn/RSeqoSxXHW61N3iU5dcgTZGamfL54wfqkm/v/4qKHVg==","signatures":[{"sig":"MEUCIARVQrzxq8ihG9/dKeGTfaaMrXbgrHz/iTSL4MQz5tsVAiEA+ainJ3SAVjMsNO3/omqrzrJICffUPz0F8leAEH27Sjk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7048},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"a07a59812226b4a5c0c57c792926f86dbc0fc79e","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202192716846_1635350975772_0.4374507874584499","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021927161216":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021927161216","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021927161216","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"193fe67a41c11308aa204e0037f1f2ffce3ff6db","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021927161216.tgz","fileCount":8,"integrity":"sha512-Ibrt6QbtSTO0AHSH4ro+N0OFaGauSaCxDgGMTcIh6WjgNWHmBsHCKHkyO5trGkml3mrxwynYYdjuYQCq3LS4uw==","signatures":[{"sig":"MEYCIQD50svMhIIPFI9ehhdTW6jaXCEzUuuJPbrHtxN/liJJ1wIhAPlY0sCoKvkggRIv0i8kqUY3BJJouOO7nOHcb5ztNtwp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7050},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"9f44a513ee3436c0fc055c0fbdbeb8bfff62c329","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021927161216_1635351185242_0.2502932241461824","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202192718640":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202192718640","_id":"@astrojs/renderer-lit@0.0.0-compiler-202192718640","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"55ea8f83e04f9eaa84c229f97fe574917a683014","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202192718640.tgz","fileCount":8,"integrity":"sha512-5RbjsGEasH0gU1J1PTCOBzgibswo+v4A7SOc49DBadZmB74WtvWRTnTzfnFrdOindRo6+WT0mAxKAH5KFaPGgA==","signatures":[{"sig":"MEUCIQDGx2Zfc58rKCKU4MHkIhe9md9SRpqpst1tbTYhfm48UQIgLfzgzUITqinO8yhMHorvFcqwUvTgdbjx5BHebs1JFwc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7048},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"387bd1a48f6f16d5a7c3e2aa2531507694fddb57","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202192718640_1635358062344_0.9245640211688366","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021927182945":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021927182945","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021927182945","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"c08bac943ed9dcf725446d25553a9e10146adcff","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021927182945.tgz","fileCount":8,"integrity":"sha512-UgfYbqPSf2JKWSFZBxdlSR7zWa+fBMczpkWSxkrpld67weSZcUd0IeMHtVToVAP9BJdl1ZCfcjWhJubSyBh9iw==","signatures":[{"sig":"MEUCIE5CcyVtPVhTNdqJGqikwteEdBQOLzwEvmdS2xkUrlc0AiEAk4rJLtgWfAo3fzMTSwHloRJDE3BM599eXIKbPz8KqSM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7050},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"77cd898dead0413641cd614e28a44d5e5191cd24","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021927182945_1635359447947_0.5720122286365963","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202192719628":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202192719628","_id":"@astrojs/renderer-lit@0.0.0-compiler-202192719628","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"083aab8ec9f939e7ab66dd660ed0b162850608dc","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202192719628.tgz","fileCount":8,"integrity":"sha512-GRcBrtcgQgxu3UB5hgUoIDVCDwgkdDgi39MTb1R88/QFDE6WRsOhZJNbzixZXuZzLyMd6yQWJFkO1j+CPGD02Q==","signatures":[{"sig":"MEUCICepkk5BfAY4zXQXCaQj5z3a6BN1cX9H1qmkyO9SHu7GAiEA725GtZy6WNzF2Cbjf+xZ4cZFYUOmRcAvm2oTbF86Z/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7048},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"e50cfa7bb4ead47019ebb17e35e615fa461f7314","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202192719628_1635361638239_0.525980651039355","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202192719637":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202192719637","_id":"@astrojs/renderer-lit@0.0.0-compiler-202192719637","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"1e28655cdb169ad85bad77fb0b5c2a18fda4da90","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202192719637.tgz","fileCount":8,"integrity":"sha512-3ushT2lq62xU42h/eowxMPJZfEVTcfo91FBCaQujBD+JqCRZC9mfAjo/PczrFfMkxyk5b5p8XPvbjPwmXfaE8Q==","signatures":[{"sig":"MEUCIQCmF2PY5N8y7axiVBFhs+c50wcsbG/3uukc3XO//5yAwAIgPkJL+qhs3Lr/ehJSu1HzE3gHJusAZsYRhfRfZ1p1X+U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7048},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"502c799b1d607bbcaf457bc9cddb8498ea58166d","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202192719637_1635361646318_0.4895879222292585","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021927202748":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021927202748","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021927202748","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"5250cd9713136c6889cc5ea4c463251c4dd99f35","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021927202748.tgz","fileCount":8,"integrity":"sha512-5YWRcs6eq+vNkC75bqXGreGLVRIUT8PaxI+jAS2i+96fCOAB7ZDoMC7Kit8ksNOOE/Ir5akGDVmvJ6Bs/CIp0g==","signatures":[{"sig":"MEUCIQC6oK0eifqYVHOVjVmG820BL4Wnt4GfiIiHjpYAso2hOgIgfhRQRNQqgb/7jBL2XqXuEHznmUewK00FZdMhz2Ajkc8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7050},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"2da8ce211db0433b36e96eb95a65ed43566939ad","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021927202748_1635366518129_0.6912605124178917","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202192722619":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202192722619","_id":"@astrojs/renderer-lit@0.0.0-compiler-202192722619","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"870a75cebb80d69f21f6aaf1437a2a1985e58006","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202192722619.tgz","fileCount":8,"integrity":"sha512-7nFRUn/9tXEnXupaSanZBFnQT1fRc5kGHAW8r0cG5PC60IxuJRodxvYHuKazDIOSWwYeO6IyXROTzK/FDef/7g==","signatures":[{"sig":"MEQCIB4m1uZPtYweGoClVQJ6BL3jLawabqeYsXtB2PZJtqeVAiBbTQev5tRtEC6j/qqz07ip0pMIbFqrGC37WK1d+vy9wg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7048},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"e16e1153715c3fcce3f3365725cf52de92c0bfa3","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202192722619_1635372442029_0.6256210282127146","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021928141529":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021928141529","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021928141529","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"70a4d5fb3793d3519d398eba34f24c4f523deda6","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021928141529.tgz","fileCount":8,"integrity":"sha512-QEcDxoH8NwQ1MVaSO0deahcTfzAR1S6txLDn2UCUKviqxxkH0VLvBkBrY2Y+R3juP+vYJjHSPKlDJbz1B/At8w==","signatures":[{"sig":"MEUCIQCFrNBRI6yLaPASQq7UOEUv7/jh6TVn5gCnx6gLKwv1LgIgCpMWUVAFy1eHhlN8uGzX+7lLgM6xIarGKFtKG2KcjZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7050},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"acd13914f4858ff2b1d1b4e1ccdab23df0fa0201","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021928141529_1635430597487_0.11798294384431274","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021928152710":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021928152710","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021928152710","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"dc78b572127ec2efcd4cfd41c30f8b3a933d867e","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021928152710.tgz","fileCount":8,"integrity":"sha512-5J6K07xRxBMaYOSY7ImFiP/jmJ0JRtmsM7oeErSEj8U+JbcdMwQ7toQ9J4hrdZdHy7xCw1jUqzaehe4pms+ETA==","signatures":[{"sig":"MEUCIAIvqic9Pq6MPmqm6+bMNqgreuf7nGoOv9+desFHr6ZXAiEAh2M4O2HqPqsmZwacfQFuO8FtJTvCqwFzMHX0fEa69t4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7050},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"ee7b5e482b41a6d0df7da3cbe2e5952b99bc4988","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021928152710_1635434897175_0.755656819003014","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021928182540":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021928182540","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021928182540","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"fb1bd1141610114b26bea7d127d78e60f396e8fa","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021928182540.tgz","fileCount":8,"integrity":"sha512-ZbMLyzkzbSBifXj5TY+oSUa+K9YKGvCW+iKJA3sKdNdByQPm+DcLSgyl39/bRFdWeX0OThH7UdyS17c+ZUXfqg==","signatures":[{"sig":"MEQCIB1BlfCj6I3YNSrNKzLldxGUB/AJ/xts2nAMcfIZb9yZAiAG59IKzRN38E1MP6lF/6+i9ApW0gn7iDfibBp6yg9EVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7050},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"934d085f94e3ee4a3690a940095c56551abf4857","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021928182540_1635445609587_0.4250189192414804","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021928182623":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021928182623","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021928182623","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"15236e24090757e32ea0daf19d02ef300ef16d6b","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021928182623.tgz","fileCount":8,"integrity":"sha512-+5NN6rUxnGE49A4Ad5DtFZmBZBwrlc9EUcIiFcoM4RvT4cLO8PdjCNXHc9ke36FiVbVvH4mcHYVVMpWP8ekJZw==","signatures":[{"sig":"MEQCIH+qZ3s482pqFWHk0a/rtN4J1yFT1hiCkdXeeDWy+O1gAiAoYz6UBMNz2dsak92rN+xdRJBoWt5FemPAtWBmoHzJLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7103},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"577d912b8ed5e5c3d48d581d7da9fd453dd9ae87","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021928182623_1635445635408_0.12005989442235654","host":"s3://npm-registry-packages"}},"0.0.0-compiler-2021928195510":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-2021928195510","_id":"@astrojs/renderer-lit@0.0.0-compiler-2021928195510","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"6989d4f06f4653aabee292cc8a3b9a60b6555f3e","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-2021928195510.tgz","fileCount":8,"integrity":"sha512-x3jqbjwa4V2dtGMOGSKd4KKz6z8VHTzFe1duwhOq7YWsKj82ZrbbMAIPx4zMXnZFi/muOZbfox3JSBnHCQMUyA==","signatures":[{"sig":"MEUCIQCTsSllrRPkURO3Vd+h6fknfuDwissrPpyMElaqD2xqwgIgOoLQlLBlqIGlJU4KKPelrtWlAx5TzmDx92x2idgoKcc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7103},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"a7e62ded69bb1e02788a6a6704eb89b86cc3fbb9","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-2021928195510_1635450972816_0.891846776369394","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202192918243":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202192918243","_id":"@astrojs/renderer-lit@0.0.0-compiler-202192918243","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"0e2dbae2955f2d29d0ae83ea067dc2bc0fc55f6d","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202192918243.tgz","fileCount":8,"integrity":"sha512-n2JpJy4FeVrKti5Ftx9ULse17LbkY6uVQkBxu/YD1JrzQu1zuTHf0uu895Vil31c1fOvfnqybtE1ZfvZdGZJrw==","signatures":[{"sig":"MEYCIQDLdHY4CSXHz6PRofs5+5F3JvNAQiItD7LT+XSyrFQxPgIhAOAaiz17mGHbWEp6k5xWvSWvrvCS0jcscd/aBd4Fkcnz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7101},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"cb733cf6895894eb50f72177839435d5b3ff4768","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202192918243_1635531901636_0.03999177591239311","host":"s3://npm-registry-packages"}},"0.0.0-compiler-202192918241":{"name":"@astrojs/renderer-lit","version":"0.0.0-compiler-202192918241","_id":"@astrojs/renderer-lit@0.0.0-compiler-202192918241","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"c3fb2b4d610975887efec4e20600b7388ac52fbd","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.0.0-compiler-202192918241.tgz","fileCount":8,"integrity":"sha512-6njhRO2Z6ERaJgw+lmxE14SH7qePqqeKPW4m5Fudn/ko1WCXGEhT2DJ2SxYY2zhMMuPkVlG43fPC7TQXHQiD1A==","signatures":[{"sig":"MEYCIQDczZUaHMQP5sIbLp+vC/4FT4Ndw/ggmE4vtza/g2VJ/AIhANO483CxEEASskl216ck5mRL+7MRlPsmGXVApG5VULO2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7101},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"6becdc8cc043fc924ddc2aae9c3382cd56ab8f88","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"8.1.0","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"16.13.0","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.0.0-compiler-202192918241_1635531904877_0.29242072370737504","host":"s3://npm-registry-packages"}},"0.2.0-next.0":{"name":"@astrojs/renderer-lit","version":"0.2.0-next.0","_id":"@astrojs/renderer-lit@0.2.0-next.0","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"5e1799756fd2c748161e64b155a9e48307e0444f","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.2.0-next.0.tgz","fileCount":8,"integrity":"sha512-a51o2/+JpswnYHY6tmoowJkWQg3U2BsvV4kC2yxbGxstEBPGbCzb/KrvpkgMco/vquViqV+Sx4/QNPjPVBM28w==","signatures":[{"sig":"MEQCIGEFCILDTQiCTV1XCmoqocj5Avxu55UuyhWhQ/iz7uSEAiBs91KTdAtoi7ukq4OAgdcVUd0Agk6RINKDnh48ALtzKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7040},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```jsx\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"6.14.15","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"14.18.1","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.2.0-next.0_1635537030019_0.3022676911563089","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"@astrojs/renderer-lit","version":"0.2.0","_id":"@astrojs/renderer-lit@0.2.0","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"27f396baaf34dad073c501828afa81df2d82b740","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.2.0.tgz","fileCount":8,"integrity":"sha512-2pf+gCEzBLVnmP/NXivkOnOoy7QzB9qSZ3A2N8C40GFvcmH/xb30aWBtDyaNT2QfoBAg+xbN56x5yjiLBy13fg==","signatures":[{"sig":"MEUCIFqXvtrgjsvIUn8uc3HvfAP7+4XXcCH1VoriZqVoJU2CAiEA1pRPRYAW0hbG6lBFUIuCGnsQMUr1YBxNja8lL/GoHvw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmBEPCRA9TVsSAnZWagAA6EcP/3jyi2rDzpMejG05PyEm\n8GvFJtJMXIdFirs3uHG+XhEpT2rebObjel4dZwxZhuW4IK0PfAOq2Jw0o4YW\neO2hwnchsHgq/rbqNuGQ38SV+LmvwFnO4rNOCPZN3IspAmblOstLbyVLbrhI\nVtdcrepFj0+1rvuJSe+26/Ym0YNDU5QBAJzDd4RA2rRssPZ6OQccJ3iG9fMW\nvVL7HGPhFux7ooVeMesRuHqH0eqjq2koDy5fQaCfSyQPGr4X4+N4PQFWAJtN\nCdvXcX7AEHaLJQiQaJj30+BM0yiHGk3JzgMNVCu92XurIPOVRf5iFdY+uqbA\nCUoLCKV+H9uKbbb9kA071QhpVIo+t713T0iObvRfVLkQWfX6Vh1DpynaEXjV\nUpDmgnwREv1tEAU+84lXXd8bqzSnrU5YlUEo98weDmPtrZu0f76UScip0b5E\nBMtRjsD2SsniuxRl1Yztso/pBuFhspgUOh90tNYXuUKond8iUwfoiK2Phi0a\nKM7+ctEWx/oiTWsTb8GweMEGzf7CITvYROX4TQSjuTA0rQ7HeAYcM7nV8nMG\ngMmF2hnvLPLEwV+dVte7GRxFSO4p4Vu6hte6JNdMmkRiqCEuLh6RSofgM+57\nOs2gVOwasFIWJQnOVkFH/MWG4ZX8fx7LeL6gepChf3Kn0Y99v8/EwZbKrNqx\njSda\r\n=tE9y\r\n-----END PGP SIGNATURE-----\r\n"},"type":"module","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"6.14.15","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"14.18.1","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.2.0_1637355790902_0.6727212373881282","host":"s3://npm-registry-packages"}},"0.2.1":{"name":"@astrojs/renderer-lit","version":"0.2.1","_id":"@astrojs/renderer-lit@0.2.1","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"dist":{"shasum":"f5e4a8a814cfdf9562329f9cd474b3bb779ccefe","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.2.1.tgz","fileCount":8,"integrity":"sha512-DjuFhsF1M5y7WZf/BsPr/EfWEP2jjIZuni3WdwGw+hGquzMp0//6ahhBX6kRHQTQeXJ87p4c9zNrUs22yOeImA==","signatures":[{"sig":"MEUCIQCsr6hEyYPGNflj9jik4c0IGRbeuZltVli7cAPLxJqi3AIgT2ONGfPTylm0O+kCfrqOq0B+93DEKo3lOPO1iu8UNEs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnAx3CRA9TVsSAnZWagAAvs0P/i9zsH9xJ7tbNXfK7CgQ\nD0MVQQuaUyAilwOHuk2TSBLtJSLGxEn3FhRQw72XDCXIjkAvwqdWwqLgFWjQ\n7VUmeMklLJ8mEmR0z2nugCdjlvVYcb2eTdnKpI1bTAODsjmQfrSwXsI2cc36\ncjQAd2Aaic3enA0zBV+BVhtGjkS5DAGHH8Evy9DolHeuqWGTkyEZRM+PFklv\nV+AmERohf1yqIeN0IAkW/RY6Es0AjFGzCd19LEjPVW7w3tpCDNXLEW7sXHx3\n9ZgzN5vVkUxR9U8ZXUi6RpIdJZCDCE7MAARBfz5/BysjIi5RHhjQVcJCLE/p\nUpL3hFdh3v6ihQuc61AAjHkBPBIAUo/IOmm1XkQB7BamQScQARq/SoUHx172\n8yoF+WRuXKyCfIFdXUir/NefO0qoKHNlE5zsCKCqpFubK3CI6gBXEkbkAbqX\nqHMasMmcTg7sCBscHy+H0G2KzAsN1dyrZa1T5s/lCulHJEiSRw0wX8CjjFrJ\nHqc+Y++glRilua5vS21JXPjYcU60dPV/OxxnPCmaV415RBarsdd13s7XXNHM\n8TO9UI12gabHOxEo8KZrsoHQaAXPl6m17cGQuLs4iRun0tbbkcrtDKr4V2yO\np1MPbe6eP93TEdjKXAulcnPmeQ9yjSno5bLDUfAdiTC5/T8AJ1t64NXnT+3E\nsrFa\r\n=b0+r\r\n-----END PGP SIGNATURE-----\r\n"},"type":"module","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"_npmVersion":"6.14.15","description":"A Lit renderer for Astro","directories":{},"_nodeVersion":"14.18.1","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.2.1_1637616759535_0.1786194945766051","host":"s3://npm-registry-packages"}},"0.3.0":{"name":"@astrojs/renderer-lit","version":"0.3.0","author":{"name":"withastro"},"license":"MIT","_id":"@astrojs/renderer-lit@0.3.0","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"homepage":"https://astro.build","bugs":{"url":"https://github.com/withastro/astro/issues"},"dist":{"shasum":"43130ffc08b3da361b76105a40880b7b7e78c1ea","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.3.0.tgz","fileCount":8,"integrity":"sha512-/YJs3NtOCQufdkrUjY+2HJUJl7TifZcxIsdX2QHfCt/EFqY6asvxU2tEN+pUL7GMjxspDjIGle6hJVcwyO5P/Q==","signatures":[{"sig":"MEUCIGBJdHoMiLro1YxWyFDXLd3k75kVz+rhguv5Fafu9dr4AiEAoYmfgO7EpxNinrifREWjc6sB1E+qai2rqbVKDqJ0jqo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8053,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxOldCRA9TVsSAnZWagAAJxUQAI/yXxA0P+PWaUjQ2qUz\no5g6drLoRPGzUIXD2Z2tglUFfvAy1Z2YlO6T/Cce1C8/vpCE8yTY/1sbjbEY\nejO5k+Bthn+uxpBHX23ledQFZ/qVLrfhj+5hYhpZcCCP8NB+cCdOcTbC61Iv\n9CL+GGduobZXM4Cb5TBpK9RxhZ34Ydo7boNkdS9t+yb7iigb9P4jAeHdAEDM\n0q/a9AKmYrdwfXQNpGohT+s0/fOEZhM7Y4rs9okpKWsUARybCipKxTwdaqnL\nBP7wASkQ5EEISACTjwdJwQjo0jrX5Jhey2wLhtkFuwSB+XIjyyNC49lRnVSe\n18UkFyTQYbFEy2GQ07KdZAyVTMsG056cI2GrZ1PvQMHVs8R+uskbeMPGhjoq\nNWxcQgk1MbQqmW3vfcEJdjTmKHMfTV4c/bfSgVrMRN+4hOOembSJdKkhLs8X\n102laarqY1HOlo6nBDXyt3pIZW8JGIXZ2bDPag7h1joAmX/4NvdG7QAcHmb2\nBuvCDmtbr700i1MMM9QoPv/cMeIjktq3hgeZ4uBcPqTS2lAysGT5K7akqUA9\nyqV2pRO+bJJgX8yWJMudtQGAm/8SU+Ynvnuckt054qp9yd6GlfrvY56VfYPf\nzJbrLhrL+hjNcbbrh1EZNRiurlSkwn1yhmfCGaPX/DpOVsSfm9rgCyLRhJ4w\n/5hW\r\n=zQOU\r\n-----END PGP SIGNATURE-----\r\n"},"type":"module","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"356d81abcb11abdc76d7e27ed6fc637cd98ffdde","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"repository":{"url":"git+https://github.com/withastro/astro.git","type":"git","directory":"packages/renderers/renderer-lit"},"_npmVersion":"8.1.2","description":"Use Lit components within Astro","directories":{},"_nodeVersion":"16.13.1","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^1.0.0","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.3.0_1640294749421_0.09006730012580566","host":"s3://npm-registry-packages"}},"0.3.1":{"name":"@astrojs/renderer-lit","version":"0.3.1","author":{"name":"withastro"},"license":"MIT","_id":"@astrojs/renderer-lit@0.3.1","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"homepage":"https://astro.build","bugs":{"url":"https://github.com/withastro/astro/issues"},"dist":{"shasum":"7ddea833db2337d8f852db98637c1923c129d49f","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.3.1.tgz","fileCount":8,"integrity":"sha512-VXZjIq2ZfCyer2YI36QB5CzbWvc7/Uq9CGPTCqrdY1BBJhmOHedC5bx9YJxePUTYSKe4ePbgV7Hf/DDSW5ZSWQ==","signatures":[{"sig":"MEYCIQDdo20ADUFbXTNbPSD9bo6Jv2uPFfGh+OH6YXwlVVaEdQIhALjMjue3GTKGCOCRB+R6dNZS2r9svBH6+wsxMDPsngGX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4dJjCRA9TVsSAnZWagAARkwP/jxoSLApeHc4qvo+9Dro\npaCjkvX1xS+lm/1ctlzGVxXopceXOvPYuSBxpxsZ+jd8Nzf3AcMyee6oe7Ir\nxoFf/BiBGgUNpsbKw0EI+5Tl/7CfaiNcyOWKtNDS0/AnswNDbNaiTRwwZoYD\nK6nLCA7SASn9ixtGXyfJlEzV/4L9k1bwTV28uizQQjterCRHEoGMHUNWu8pO\nti74HPZJS78dhmrPRVkpVvveFQ4kZX+mwcGBechqt5Yclly0KxcSQOtXScgy\nFUVPuCN6+WOr32InfnrsGszMiXMjxYeDHUoKfT0QovcWKkWgQwkcT7n51GH0\nkxZUFf9NjGh7jSCzuBSkQdLcbqE1TqNgrs/tHUirzM03qD1CQIjpIedEQguA\np1D7sY2rdumdphCuCDq+mniUGx0G2k+3bzp3UlrRDDW/Vz+QRectF+pm2kel\n4AsjUqtk2ib1IFMRiaB0oRGNgUNkkICJTaKIZ8j/4J4UQU1CS9MfkjmFCh2a\nmqaRvdh4w4JtYj8l2AoJO3erWY6Z9WTsApfMVqOBJK/StN2Fc/aK6S79lLm9\n5uYJ7+bd/sGb0iQHlgzFPQYFz0yG04A1j3P52EIRCb12AciFDyL+Hl6rbadM\nT/9usdRdPJNW2NoYPGZdRpBbnTx+rUbVJ/w+63SlFSTY/O7C5dxcRnwdjynv\nS8Rt\r\n=ag+P\r\n-----END PGP SIGNATURE-----\r\n"},"type":"module","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"f5ce6edb5b2c92766470562fa633a73b0d546bab","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"repository":{"url":"git+https://github.com/withastro/astro.git","type":"git","directory":"packages/renderers/renderer-lit"},"_npmVersion":"8.1.2","description":"Use Lit components within Astro","directories":{},"_nodeVersion":"16.13.2","dependencies":{"lit":"^2.0.2","@lit-labs/ssr":"^2.0.1","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.3.1_1642189411463_0.2822445766269097","host":"s3://npm-registry-packages"}},"0.4.0-next.0":{"name":"@astrojs/renderer-lit","version":"0.4.0-next.0","author":{"name":"withastro"},"license":"MIT","_id":"@astrojs/renderer-lit@0.4.0-next.0","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"homepage":"https://astro.build","bugs":{"url":"https://github.com/withastro/astro/issues"},"dist":{"shasum":"e5c732c64d8d79e610c4ae7d810759e6d2fe0c99","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.4.0-next.0.tgz","fileCount":8,"integrity":"sha512-d3MbEHrzTgSdRIhyNcHvVrK1hh5rL9e3ChZ8oxo5HTvTPiU9W7lSEptBvu7vCDeR4tAkAClgYz4fYi7fU3pJ5A==","signatures":[{"sig":"MEYCIQCt3D3TsQQmvOlOkiV/Nk8SfnsKsXoJy4g6+WYj5mT9pwIhAPhW+owCmtBrcGYmHcvWnND+RhzDaSMVUphAyQZjk3rZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBBP2CRA9TVsSAnZWagAAwysP/iouKn6hLnKcyh7Uo2OX\nUXMlKISlB5gF1hlOs724aXCl2buZQTkN+oRa3eW83LzOst8PhZRv/3JRRUGv\nlLkQcpRF5ZZ7qb+zAFMF9NWy85fdGzHPBIbVCjTEJ4fZ3hhsIcDGh644YCyv\nccqDOW6tFZPligF75zQ7ASKXHr8XyHEjQGahzKULgxcn3Jx8UPFkz2TissaZ\nUGTLU/8xElkSDx2RkInh+p+9wyhMUykK/E0B9920N3lxSKQ3gdvAtw9BH82N\nRC1F0GlliKcOzQj7hF5WKQ1jh6ELoMMtEXxF/1AxyLPMnauLZsCtJK4JJH6D\nlwFvdTq/r3z4tU17/O75AlycHEq7Ud1h/Dii8AL+SfcqjULLMfOfc6jSs7mY\nfizIlXiePMFJe4kkGAmFxgftIZyOY7hP4LxOm7jYUnduGOXNTRvvF+7RlbvQ\n4Qoac+9f9HPrCq1zibedkuANepfr/vhMr+rD1/RRnIsNzrlnAqYPVf2u3658\nGODL24QGiqk5IrJlTBNj7fAYw6T93u/JJWydN1YELjl4MMjOzBE/DHZT/xR2\ndxf3qqy9VQR3SUKmnDiOohvUbwLCH/4eiZcmnNwv3UDXUnbTSUdcSgPgBT+B\ngD1vFKbBcManQk4goG/ptVO6f0/LqtK6ArAbxZmkS1426A5hyjbZtfKhQe6w\nF0zH\r\n=2J66\r\n-----END PGP SIGNATURE-----\r\n"},"type":"module","readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```astro\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```astro\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"3e24341f1712e78f5e50a3f0c9ffa446f9f4eb42","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"repository":{"url":"git+https://github.com/withastro/astro.git","type":"git","directory":"packages/renderers/renderer-lit"},"_npmVersion":"8.1.2","description":"Use Lit components within Astro","directories":{},"_nodeVersion":"16.13.2","dependencies":{"lit":"^2.1.3","@lit-labs/ssr":"^2.0.2","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.4.0-next.0_1644434422238_0.83727063717834","host":"s3://npm-registry-packages"}},"0.4.0":{"name":"@astrojs/renderer-lit","version":"0.4.0","author":{"name":"withastro"},"license":"MIT","_id":"@astrojs/renderer-lit@0.4.0","maintainers":[{"name":"natemoo-re","email":"nate@natemoo.re"},{"name":"drewpowers","email":"drew@pow.rs"},{"name":"fredkschott","email":"fkschott@gmail.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"homepage":"https://astro.build","bugs":{"url":"https://github.com/withastro/astro/issues"},"dist":{"shasum":"32e1c91b4a1c46dfa0f2ef2a3bfa62b4221b0a56","tarball":"https://registry.npmjs.org/@astrojs/renderer-lit/-/renderer-lit-0.4.0.tgz","fileCount":8,"integrity":"sha512-lzW5oGu7errwGD/z4B6w4DbJIkazvDni0RWWZCsXxJnk65IUNMollCMdmJEB73zi258DFQyjBhnUycsgFZi1ew==","signatures":[{"sig":"MEUCIBd7O0Cnc89nfAjlU2b9tKkSE3r0GQf0wYTIpk6jQk0SAiEAzwdsqk6eHpn/Z9BfbI/Q2j+A6KKMw0u/Hx8fRg9YwJc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEB9+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPDhAAiVRZOu+CJNhWSc0Rm4Ydp9DIE1uxoNFb/PBB6K2fPBvIl+A/\r\nxDXX4gnGn7L2y5VLnOyP9RTaZjJG+p9D3FF30gesm7vqZ/BA1qdta9E2O5EV\r\nZwNy12yHtRCwWY4/wNNS8TKmqpu7z1InXC7m05F+pkT1pLjtXp874Qfz4HuJ\r\nxSd0hMr0qeW6BJ+qqUWaYPcGj3wmVzSfmYCGIUa9ZKWx+t+ascjoJnmTWHtH\r\nSo0D0q4+Nfykls036hvz8s7N4GHmiikpWcB2Qpgf3yFBgvELRp/WNr4UQ1l+\r\nYqw4UVOpt2ygnmEhGCQrIir0qpaIY/gXE1RqPOqCrwFhQ0n/D1B+cs9sOdv9\r\nzMFE5XG9CyqWUO30G5J8qhg1iUlIyscX3kt6usDDiO/Zm9WdUb8oU4ahJ148\r\nqnrlber+B3tF5w8cxjzjm4aK4R8sDy8nf1AIRaoT8DBAPkMVNPFmxRe0TWbp\r\npil4Q8DGcOzTP1p16XwP6N7mpo0HLXRM8X7kx7oVfElxaaJ54Txm0ZjpKxsT\r\nT//7R0YPoKRtJPspEz990nDthv6dvl8UTgNHIWQJ+6P7H+U/IHiUbB2aPxMh\r\ntcg2lqdkuSk73mUYlXnM6wscACgBNBh0+cc74myqgaFlwwAyKcbnDWfizot/\r\ns/oSbEOoO7AookUcVoDKSk8HjN0Hem1M8rQ=\r\n=5tmN\r\n-----END PGP SIGNATURE-----\r\n"},"type":"module","exports":{".":"./index.js","./*":"./*","./server.js":"./server.js","./package.json":"./package.json","./client-shim.js":"./client-shim.js"},"gitHead":"1d9f8a57f5863948eceda99a72da3fcdda986073","scripts":{"start":"node server.js"},"_npmUser":{"name":"fredkschott","email":"fkschott@gmail.com"},"repository":{"url":"git+https://github.com/withastro/astro.git","type":"git","directory":"packages/renderers/renderer-lit"},"_npmVersion":"8.3.1","description":"Use Lit components within Astro","directories":{},"_nodeVersion":"16.14.0","dependencies":{"lit":"^2.1.3","@lit-labs/ssr":"^2.0.2","@webcomponents/template-shadowroot":"^0.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/renderer-lit_0.4.0_1645223806096_0.27428967273547067","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-07-13T12:52:17.609Z","modified":"2025-09-18T17:32:00.486Z","0.1.0":"2021-07-13T12:52:18.308Z","0.1.1":"2021-09-15T00:24:20.620Z","0.1.2":"2021-09-28T19:36:11.989Z","0.0.0-compiler-202191419857":"2021-10-14T19:10:14.231Z","0.0.0-compiler-20219160298":"2021-10-16T00:30:20.682Z","0.0.0-compiler-2021918182157":"2021-10-18T18:23:15.934Z","0.0.0-compiler-2021918205521":"2021-10-18T20:56:38.638Z","0.0.0-compiler-2021919122335":"2021-10-19T12:24:50.082Z","0.0.0-compiler-2021919144253":"2021-10-19T14:43:47.756Z","0.0.0-compiler-2021919173559":"2021-10-19T17:37:02.455Z","0.0.0-compiler-202191918936":"2021-10-19T18:10:31.757Z","0.0.0-compiler-2021922153359":"2021-10-22T15:35:09.493Z","0.0.0-compiler-2021922171217":"2021-10-22T17:13:03.868Z","0.0.0-compiler-202192217569":"2021-10-22T17:57:07.762Z","0.0.0-compiler-202192218225":"2021-10-22T18:03:15.254Z","0.0.0-compiler-2021922182313":"2021-10-22T18:24:01.041Z","0.0.0-compiler-202192219270":"2021-10-22T19:27:52.613Z","0.0.0-compiler-2021922192928":"2021-10-22T19:30:21.082Z","0.0.0-compiler-2021922193128":"2021-10-22T19:32:28.101Z","0.0.0-compiler-2021922194124":"2021-10-22T19:42:15.220Z","0.0.0-compiler-202192219476":"2021-10-22T19:48:07.419Z","0.0.0-compiler-202192222271":"2021-10-22T22:28:04.912Z","0.0.0-compiler-202192513412":"2021-10-25T13:41:52.109Z","0.0.0-compiler-2021925165634":"2021-10-25T16:57:40.619Z","0.0.0-compiler-202192518234":"2021-10-25T18:03:21.532Z","0.0.0-compiler-202192518814":"2021-10-25T18:09:16.865Z","0.0.0-compiler-202192519628":"2021-10-25T19:07:21.357Z","0.0.0-compiler-2021925192442":"2021-10-25T19:25:46.259Z","0.0.0-compiler-2021925201936":"2021-10-25T20:20:38.644Z","0.0.0-compiler-2021926152628":"2021-10-26T15:27:26.308Z","0.0.0-compiler-2021926155820":"2021-10-26T15:59:18.572Z","0.0.0-compiler-20219261822":"2021-10-26T18:02:59.929Z","0.0.0-compiler-202192621387":"2021-10-26T21:39:12.517Z","0.0.0-compiler-20219270206":"2021-10-27T00:21:06.305Z","0.0.0-compiler-202192721226":"2021-10-27T02:13:25.309Z","0.0.0-compiler-202192735230":"2021-10-27T03:53:25.101Z","0.0.0-compiler-202192745537":"2021-10-27T04:56:26.704Z","0.0.0-compiler-2021927151937":"2021-10-27T15:20:24.933Z","0.0.0-compiler-2021927153828":"2021-10-27T15:39:19.524Z","0.0.0-compiler-2021927154633":"2021-10-27T15:47:23.627Z","0.0.0-compiler-202192716846":"2021-10-27T16:09:36.002Z","0.0.0-compiler-2021927161216":"2021-10-27T16:13:05.348Z","0.0.0-compiler-202192718640":"2021-10-27T18:07:42.527Z","0.0.0-compiler-2021927182945":"2021-10-27T18:30:48.084Z","0.0.0-compiler-202192719628":"2021-10-27T19:07:18.390Z","0.0.0-compiler-202192719637":"2021-10-27T19:07:26.514Z","0.0.0-compiler-2021927202748":"2021-10-27T20:28:38.316Z","0.0.0-compiler-202192722619":"2021-10-27T22:07:22.196Z","0.0.0-compiler-2021928141529":"2021-10-28T14:16:37.932Z","0.0.0-compiler-2021928152710":"2021-10-28T15:28:17.350Z","0.0.0-compiler-2021928182540":"2021-10-28T18:26:49.765Z","0.0.0-compiler-2021928182623":"2021-10-28T18:27:15.589Z","0.0.0-compiler-2021928195510":"2021-10-28T19:56:13.004Z","0.0.0-compiler-202192918243":"2021-10-29T18:25:01.806Z","0.0.0-compiler-202192918241":"2021-10-29T18:25:05.003Z","0.2.0-next.0":"2021-10-29T19:50:30.155Z","0.2.0":"2021-11-19T21:03:11.050Z","0.2.1":"2021-11-22T21:32:39.667Z","0.3.0":"2021-12-23T21:25:49.574Z","0.3.1":"2022-01-14T19:43:31.639Z","0.4.0-next.0":"2022-02-09T19:20:22.400Z","0.4.0":"2022-02-18T22:36:46.248Z"},"bugs":{"url":"https://github.com/withastro/astro/issues"},"author":{"name":"withastro"},"license":"MIT","homepage":"https://astro.build","repository":{"url":"git+https://github.com/withastro/astro.git","type":"git","directory":"packages/renderers/renderer-lit"},"description":"Use Lit components within Astro","maintainers":[{"email":"fkschott@gmail.com","name":"fredkschott"},{"email":"matthew@matthewphillips.info","name":"matthewp"}],"readme":"# Astro Lit Renderer\n\nThis is a plugin for [Astro](https://astro.build/) apps that enables server-side rendering of custom elements build with [Lit](https://lit.dev/).\n\nServer-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__.\n\n## Installation\n\nInstall `@astrojs/renderer-lit` and then add it to your `astro.config.mjs` in the `renderers` property:\n\n```\nnpm install @astrojs/renderer-lit\n```\n\n__astro.config.mjs__\n\n```js\nexport default {\n  // ...\n\n  renderers: [\n    // ...\n    '@astrojs/renderer-lit'\n  ]\n}\n```\n\n## Usage\n\nIf 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.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n  render() {\n    return html` <p>Hello world! From my-element</p> `;\n  }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```astro\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```astro\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe 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.\n\n## More Documentation\n\n[Astro Renderer Documentation][renderer-docs]\n\n[astro]: https://astro.build\n[renderer-docs]: https://docs.astro.build/reference/renderer-reference\n","readmeFilename":"readme.md"}