{"id":15375944,"url":"https://github.com/thepassle/custom-elements-ssr","last_synced_at":"2025-04-15T16:17:41.338Z","repository":{"id":48938791,"uuid":"483926479","full_name":"thepassle/custom-elements-ssr","owner":"thepassle","description":null,"archived":false,"fork":false,"pushed_at":"2023-10-23T09:22:34.000Z","size":18,"stargazers_count":50,"open_issues_count":3,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T22:11:34.514Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://vanilla-ssr-deploy-test.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thepassle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-04-21T06:04:36.000Z","updated_at":"2025-03-08T07:28:04.000Z","dependencies_parsed_at":"2024-02-22T05:46:14.909Z","dependency_job_id":null,"html_url":"https://github.com/thepassle/custom-elements-ssr","commit_stats":{"total_commits":9,"total_committers":2,"mean_commits":4.5,"dds":"0.11111111111111116","last_synced_commit":"82f3b4a5fdaee3be0fa09e5ff32e775cb2e629fa"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepassle%2Fcustom-elements-ssr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepassle%2Fcustom-elements-ssr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepassle%2Fcustom-elements-ssr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepassle%2Fcustom-elements-ssr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thepassle","download_url":"https://codeload.github.com/thepassle/custom-elements-ssr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248717241,"owners_count":21150387,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-01T14:05:20.611Z","updated_at":"2025-04-15T16:17:41.319Z","avatar_url":"https://github.com/thepassle.png","language":"JavaScript","readme":"# custom-elements-ssr\n\nThis package contains an Astro SSR integration to render vanilla custom elements on the server, as well as a [@lit-labs/ssr](https://www.npmjs.com/package/@lit-labs/ssr) compatible `ElementRenderer` for usage with [@lit-labs/ssr](https://www.npmjs.com/package/@lit-labs/ssr).\n\nEnables server-side rendering and client-side hydration for your [Lit](https://lit.dev/) custom elements.\n\n\u003e Try it on [Stackblitz](https://stackblitz.com/edit/github-hcspcv-ccu1fd?file=src/pages/index.astro)\n\n## Differences with lit SSR\n\nIt could be the case that you were hoping the Lit SSR package would also support vanilla Custom Elements, and were surprised to find that it didnt. The reason for this is that to render custom elements on the server side, we need some browser APIs to be available in a Node.js environment. Lit however, makes surprisingly little use of browser APIs to be able to do efficient rendering. This means that the DOM shim that Lit SSR requires is really, really minimal, and doesn't include a bunch of things, like for example querySelectors. This package instead makes use of [linkedom]() to shim browser functionality on the server, which does include the required browser APIs to render custom elements on the server.\n\nAdditionally the `ElementRenderer` for vanilla custom elements is a little bit different from Lit elements.\n\n## Limitations\n\nLinkedom has decent support for custom elements, but there is some functionality missing, like for example HTMLSlotElements `assignedNodes()` method. There is an open issue [here](https://github.com/WebReflection/linkedom/issues/131).\n\n## @lit-labs/ssr usage\n\nImport the ElementRenderer:\n\n```\nimport { CustomElementRenderer } from 'custom-elements-ssr/CustomElementRenderer.js';\n```\n\n## Astro Usage\n\n### Configuration\n\nIn your Astro SSR-enabled project, you'll need to install the integration and the required polyfill:\n\n```\nnpm i custom-elements-ssr @webcomponents/template-shadowroot\n```\n\nAdd the integration to your `astro.config.mjs`:\n```diff\nimport { defineConfig } from 'astro/config';\n+ import customElements from 'custom-elements-ssr/astro.js';\n\n// https://astro.build/config\nexport default defineConfig({\n+  integrations: [customElements()]\n});\n```\n\n### Usage\n\nCreate a custom element in your project.\n\n`src/components/my-element.js`:\n```js\nclass MyElement extends HTMLElement {\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n  }\n\n  connectedCallback() {\n    this.shadowRoot.innerHTML = '\u003ch1\u003eHello World\u003c/h1\u003e';\n  }\n}\n\n// Make sure to export the `tagName`, without it, Astro will error\nexport const tagName = 'my-element';\ncustomElements.define(tagName, MyElement);\n```\n\nAnd then use it in your Astro pages:\n`index.astro`:\n```astro\n---\nimport '../components/my-element.js';\n---\n\u003cmy-element client:idle\u003e\u003c/my-element\u003e\n```\n\n## Example\n\nYou can find an example here:\n- [github source](https://github.com/thepassle/astro-custom-element-example)\n- [netlify demo](https://vanilla-ssr-deploy-test.netlify.app/)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthepassle%2Fcustom-elements-ssr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthepassle%2Fcustom-elements-ssr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthepassle%2Fcustom-elements-ssr/lists"}