├── .eslintignore
├── commitlint.config.cjs
├── playground
    ├── wc
    │   ├── accordion
    │   │   ├── index.ts
    │   │   ├── accordion.ts
    │   │   ├── accordion-item.css
    │   │   └── accordion-item.ts
    │   ├── simple-parent.ts
    │   ├── my-element.ts
    │   └── simple-button.ts
    ├── pages
    │   ├── simple-parent.vue
    │   ├── simple-element.vue
    │   ├── multiple-different-element-tags.vue
    │   ├── attribute-testing.vue
    │   ├── with-provide-inject.vue
    │   ├── vue-component-in-slot.vue
    │   ├── with-v-if.vue
    │   ├── fallthrough-attributes.vue
    │   ├── nested-lit-element-in-slot.vue
    │   ├── with-v-for.vue
    │   ├── with-vue-bindings.vue
    │   └── index.vue
    ├── package.json
    ├── plugins
    │   └── custom-elements.ts
    ├── components
    │   ├── SimpleMessage.vue
    │   ├── ComponentWithInject.vue
    │   └── ComponentWrappingLitElement.vue
    ├── nuxt.config.ts
    ├── app.vue
    └── package-lock.json
├── .prettierignore
├── .husky
    └── commit-msg
├── tsconfig.json
├── prettier.config.cjs
├── src
    ├── runtime
    │   ├── plugins
    │   │   ├── hydrateSupport.client.ts
    │   │   ├── polyfill.client.ts
    │   │   ├── antiFouc.server.ts
    │   │   └── autoLitWrapper.ts
    │   ├── components
    │   │   ├── LitWrapperClient.vue
    │   │   ├── LitWrapper.vue
    │   │   └── LitWrapperServer.vue
    │   └── utils
    │   │   ├── customElements.ts
    │   │   └── litElementRenderer.ts
    └── module.ts
├── .nuxtrc
├── vitest.config.ts
├── .github
    ├── workflows
    │   ├── test.yml
    │   └── release-please.yml
    └── ISSUE_TEMPLATE
    │   ├── feature_request.md
    │   └── bug_report.md
├── .gitignore
├── .eslintrc.json
├── LICENSE
├── package.json
├── tests
    ├── playground
    │   └── basic.spec.ts
    └── module
    │   └── autoLitWrapper.spec.ts
├── README.md
└── CHANGELOG.md


/.eslintignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | .nuxt
4 | .output
5 | 


--------------------------------------------------------------------------------
/commitlint.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = { extends: ["@commitlint/config-conventional"] };
2 | 


--------------------------------------------------------------------------------
/playground/wc/accordion/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./accordion";
2 | export * from "./accordion-item";
3 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | coverage/
3 | dist
4 | .nuxt
5 | .output
6 | __snapshots__/
7 | *.mdx
8 | .github/


--------------------------------------------------------------------------------
/.husky/commit-msg:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname -- "$0")/_/husky.sh"
3 | 
4 | npx --no -- commitlint --edit ${1}
5 | 


--------------------------------------------------------------------------------
/playground/pages/simple-parent.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <simple-parent></simple-parent>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./playground/.nuxt/tsconfig.json",
3 |   "compilerOptions": {
4 |     "types": ["nuxt/app"]
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/playground/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "private": true,
3 |   "name": "my-module-playground",
4 |   "dependencies": {
5 |     "lit": "^3.1.3"
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/prettier.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   printWidth: 120,
3 |   trailingComma: "none",
4 |   singleQuote: false,
5 |   endOfLine: "auto"
6 | };
7 | 


--------------------------------------------------------------------------------
/playground/pages/simple-element.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <simple-button :disabled="true">I am a SSR-ed Lit element</simple-button>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/runtime/plugins/hydrateSupport.client.ts:
--------------------------------------------------------------------------------
1 | import "@lit-labs/ssr-client/lit-element-hydrate-support.js";
2 | import { defineNuxtPlugin } from "#imports";
3 | 
4 | export default defineNuxtPlugin(() => {});
5 | 


--------------------------------------------------------------------------------
/.nuxtrc:
--------------------------------------------------------------------------------
1 | imports.autoImport=false
2 | # enable TypeScript bundler module resolution - https://www.typescriptlang.org/docs/handbook/modules/reference.html#bundler
3 | experimental.typescriptBundlerResolution=true
4 | 


--------------------------------------------------------------------------------
/playground/pages/multiple-different-element-tags.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <my-element>I am a SSR-ed Lit element</my-element>
4 |     <simple-button>And so am I</simple-button>
5 |   </div>
6 | </template>
7 | 


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vitest/config";
 2 | 
 3 | export default defineConfig({
 4 |   test: {
 5 |     deps: {
 6 |       inline: ["@nuxt/test-utils-edge"],
 7 |     },
 8 |   },
 9 | });
10 | 


--------------------------------------------------------------------------------
/playground/plugins/custom-elements.ts:
--------------------------------------------------------------------------------
1 | import { defineNuxtPlugin } from "#app";
2 | import "@/wc/my-element";
3 | import "@/wc/simple-button";
4 | import "@/wc/accordion";
5 | import "@/wc/simple-parent";
6 | 
7 | export default defineNuxtPlugin(() => {});
8 | 


--------------------------------------------------------------------------------
/playground/components/SimpleMessage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <p>{{ message }}</p>
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 | defineProps({
 7 |   message: {
 8 |     type: String,
 9 |     default: 'I am a simple message'
10 |   }
11 | })
12 | </script>
13 | 


--------------------------------------------------------------------------------
/playground/pages/attribute-testing.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     This element should render an empty string
 4 |     <my-element :name="myname"></my-element>
 5 |   </div>
 6 | </template>
 7 | <script setup lang="ts">
 8 | const myname = "";
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/playground/pages/with-provide-inject.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <simple-button>
 3 |     <ComponentWithInject />
 4 |   </simple-button>
 5 | </template>
 6 | 
 7 | <script setup>
 8 | import { provide } from "vue";
 9 | 
10 | provide("injectedVariable", "I am injected");
11 | </script>
12 | 


--------------------------------------------------------------------------------
/playground/pages/vue-component-in-slot.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <my-element>
 4 |       <span slot="prepend">
 5 |         <SimpleMessage message="I am a vue component as a slot in a Lit element" />
 6 |       </span>
 7 |     </my-element>
 8 |   </div>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/playground/components/ComponentWithInject.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h1 id="injectedVariable">
 3 |     {{ injectedVariable }}
 4 |   </h1>
 5 | </template>
 6 | 
 7 | <script setup>
 8 | import { inject } from "vue";
 9 | 
10 | const injectedVariable = inject("injectedVariable");
11 | </script>
12 | 


--------------------------------------------------------------------------------
/src/runtime/components/LitWrapperClient.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { defineComponent } from "vue";
 3 | 
 4 | export default defineComponent({
 5 |   setup(_, context) {
 6 |     return () => context.slots.default?.()?.[0];
 7 |   },
 8 | 
 9 |   mounted() {
10 |     this.$el?.removeAttribute?.("defer-hydration");
11 |   }
12 | });
13 | </script>
14 | 


--------------------------------------------------------------------------------
/playground/components/ComponentWrappingLitElement.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <simple-button v-if="true" class="this-class-should-also-exist" data-attr-should-also-exist>Button</simple-button>
 3 |   <simple-button v-else>Button</simple-button>
 4 | </template>
 5 | 
 6 | <style scoped>
 7 | .this-class-should-also-exist {
 8 |   padding: 10px;
 9 |   border: 1px solid red;
10 | }
11 | </style>
12 | 


--------------------------------------------------------------------------------
/playground/wc/accordion/accordion.ts:
--------------------------------------------------------------------------------
 1 | import { LitElement, html } from "lit";
 2 | import { customElement } from "lit/decorators.js";
 3 | 
 4 | export class Accordion extends LitElement {
 5 |   /**
 6 |    * Render
 7 |    */
 8 |   render() {
 9 |     return html`<div class="accordion"><slot></slot></div>`;
10 |   }
11 | }
12 | if (!customElements.get("my-accordion")) {
13 |   customElement("my-accordion")(Accordion);
14 | }
15 | 


--------------------------------------------------------------------------------
/playground/pages/with-v-if.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <article>
 3 |     <my-accordion>
 4 |       <my-accordion-item v-if="true" title="I should be shown"> foo </my-accordion-item>
 5 |       <my-accordion-item v-else-if="false" title="I should not be shown"> bar </my-accordion-item>
 6 |       <my-accordion-item v-else title="I should also not be shown"> baz </my-accordion-item>
 7 |     </my-accordion>
 8 |   </article>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/src/runtime/utils/customElements.ts:
--------------------------------------------------------------------------------
 1 | export function isCustomElementTag(name) {
 2 |   return typeof name === "string" && /-/.test(name);
 3 | }
 4 | 
 5 | export function getCustomElementConstructor(name) {
 6 |   if (typeof customElements !== "undefined" && isCustomElementTag(name)) {
 7 |     return customElements.get(name) || null;
 8 |   } else if (typeof name === "function") {
 9 |     return name;
10 |   }
11 |   return null;
12 | }
13 | 


--------------------------------------------------------------------------------
/playground/pages/fallthrough-attributes.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ComponentWrappingLitElement
 3 |     class="this-class-should-exist"
 4 |     data-attr-should-exist
 5 |     @click="onClick"
 6 |   ></ComponentWrappingLitElement>
 7 | </template>
 8 | 
 9 | <script setup>
10 | function onClick() {
11 |   console.log("clicked");
12 | }
13 | </script>
14 | 
15 | <style>
16 | .this-class-should-exist {
17 |   background-color: yellow;
18 | }
19 | </style>
20 | 


--------------------------------------------------------------------------------
/playground/wc/simple-parent.ts:
--------------------------------------------------------------------------------
 1 | import { LitElement, html } from "lit";
 2 | 
 3 | export class SimpleParent extends LitElement {
 4 |   render() {
 5 |     return html`<p>parent</p>
 6 |       <simple-child></simple-child>`;
 7 |   }
 8 | }
 9 | customElements.define("simple-parent", SimpleParent);
10 | 
11 | export class SimpleChild extends LitElement {
12 |   render() {
13 |     return html`<p>child</p>`;
14 |   }
15 | }
16 | customElements.define("simple-child", SimpleChild);
17 | 


--------------------------------------------------------------------------------
/src/runtime/components/LitWrapper.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { h, defineComponent, defineAsyncComponent } from "vue";
 3 | 
 4 | import LitWrapperClient from "./LitWrapperClient.vue";
 5 | const LitWrapperServer = defineAsyncComponent(() => import("./LitWrapperServer.vue"));
 6 | 
 7 | export default defineComponent({
 8 |   name: "LitWrapper",
 9 | 
10 |   render() {
11 |     return h(import.meta.server ? LitWrapperServer : LitWrapperClient, this.$slots.default);
12 |   }
13 | });
14 | </script>
15 | 


--------------------------------------------------------------------------------
/playground/pages/nested-lit-element-in-slot.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <my-element>
 4 |       <span slot="prepend">
 5 |         <my-element @my-event="handleNestedLitElementClick">
 6 |           <div slot="prepend">I am a Lit element within another Lit element</div>
 7 |         </my-element>
 8 |       </span>
 9 |     </my-element>
10 |   </div>
11 | </template>
12 | 
13 | <script lang="ts" setup>
14 | function handleNestedLitElementClick () {
15 |   alert('You clicked the nested Lit element!')
16 | }
17 | </script>
18 | 


--------------------------------------------------------------------------------
/playground/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineNuxtConfig } from "nuxt/config";
 2 | import NuxtSsrLit from "..";
 3 | 
 4 | export default defineNuxtConfig({
 5 |   modules: [[NuxtSsrLit, { litElementPrefix: ["my-", "simple-"] }]],
 6 |   sourcemap: process.env.NODE_ENV === "test" ? false : { client: true, server: true },
 7 |   compatibilityDate: "2024-11-05",
 8 |   hooks: {
 9 |     "vite:extendConfig": (config, { isServer }) => {
10 |       if (isServer) {
11 |         config.build.rollupOptions.output.preserveModules = false;
12 |       }
13 |     }
14 |   }
15 | });
16 | 


--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
 1 | name: PR Check
 2 | on: 
 3 |   pull_request:
 4 |     branches:
 5 |       - main
 6 | 
 7 | jobs:
 8 |   build:
 9 |     name: Build packages
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - name: Checkout
13 |         uses: actions/checkout@v2
14 | 
15 |       - name: Install dependencies
16 |         run: npm ci
17 | 
18 |       - name: Install Nuxt 3 Playground dependencies
19 |         run: cd playground && npm i
20 | 
21 |       - name: Prepare
22 |         run: npm run dev:prepare
23 | 
24 |       - name: Build packages
25 |         run: npm run build
26 | 
27 |       - name: Test Nuxt 3
28 |         run: npm test
29 |     


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Dependencies
 2 | node_modules
 3 | 
 4 | # Logs
 5 | *.log*
 6 | 
 7 | # Temp directories
 8 | .temp
 9 | .tmp
10 | .cache
11 | 
12 | # Yarn
13 | **/.yarn/cache
14 | **/.yarn/*state*
15 | 
16 | # Generated dirs
17 | dist
18 | 
19 | # Nuxt
20 | .nuxt
21 | .output
22 | .vercel_build_output
23 | .build-*
24 | .env
25 | .netlify
26 | 
27 | # Env
28 | .env
29 | 
30 | # Testing
31 | reports
32 | coverage
33 | *.lcov
34 | .nyc_output
35 | 
36 | # VSCode
37 | .vscode
38 | 
39 | # Intellij idea
40 | *.iml
41 | .idea
42 | 
43 | # OSX
44 | .DS_Store
45 | .AppleDouble
46 | .LSOverride
47 | .AppleDB
48 | .AppleDesktop
49 | Network Trash Folder
50 | Temporary Items
51 | .apdisk
52 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/src/runtime/plugins/polyfill.client.ts:
--------------------------------------------------------------------------------
 1 | import { defineNuxtPlugin } from "#imports";
 2 | 
 3 | export default defineNuxtPlugin(async () => {
 4 |   // shadowRootMode is the standardized attribute.
 5 |   // Chromium 90-111 supported shadowRoot, so we check for that as well.
 6 |   const hasNativeDsd =
 7 |     Object.hasOwnProperty.call(HTMLTemplateElement.prototype, "shadowRootMode") ||
 8 |     Object.hasOwnProperty.call(HTMLTemplateElement.prototype, "shadowRoot");
 9 | 
10 |   if (!hasNativeDsd) {
11 |     const { hydrateShadowRoots } = await import("@webcomponents/template-shadowroot/template-shadowroot.js");
12 |     hydrateShadowRoots(document.body);
13 |     document.body.removeAttribute("dsd-pending");
14 |   }
15 | });
16 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 |  - Nuxt version: [e.g. 3.0.0]
27 |  - Browser [e.g. chrome, safari]
28 |  - Version [e.g. 22]
29 | 
30 | **Additional context**
31 | Add any other context about the problem here.
32 | 


--------------------------------------------------------------------------------
/playground/wc/accordion/accordion-item.css:
--------------------------------------------------------------------------------
 1 | .accordion-item__invoker {
 2 |     display: flex;
 3 |     justify-content: space-between;
 4 |     background: none;
 5 |     border: none;
 6 |     border-top: 1px solid black;
 7 |     color: black;
 8 |     cursor: pointer;
 9 |     font-size: 16px;
10 |     font-weight: 700;
11 |     line-height: 24px;
12 |     padding: 20px 48px 16px 0;
13 |     position: relative;
14 |     text-align: left;
15 |     width: 100%;
16 | }
17 | 
18 | .accordion-item__invoker[aria-expanded='true'] {
19 |     color: green;
20 | }
21 | 
22 | .accordion-item__invoker:hover,
23 | .accordion-item__invoker.accordion-item__invoker[aria-expanded='true']:hover {
24 |     color: blue;
25 | }
26 | 
27 | .accordion-item__content:not([hidden]) {
28 |     padding-bottom: 20px;
29 | }
30 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "vue/setup-compiler-macros": true
 4 |   },
 5 |   "extends": [
 6 |     "@nuxtjs/eslint-config-typescript",
 7 |     "eslint:recommended",
 8 |     "@vue/prettier",
 9 |     "@vue/typescript/recommended",
10 |     "plugin:vue/vue3-recommended"
11 |   ],
12 |   "rules": {
13 |     "@typescript-eslint/no-unused-vars": ["off"],
14 |     "@typescript-eslint/no-empty-function": "off",
15 |     "vue/no-deprecated-slot-attribute": "off",
16 |     "vue/no-v-html": "off",
17 |     "vue/attribute-hyphenation": "off",
18 |     "vue/max-attributes-per-line": "off",
19 |     "vue/html-self-closing": "off",
20 |     "vue/singleline-html-element-content-newline": "off",
21 |     "vue/html-closing-bracket-newline": "off",
22 |     "vue/multiline-html-element-content-newline": "off",
23 |     "vue/html-indent": "off"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/playground/pages/with-v-for.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <article>
 3 |     <my-accordion>
 4 |       <my-accordion-item v-for="(item, index) in items" :key="item.title" :open="index === 0" :title="item.title">
 5 |         {{ item.content }}
 6 |       </my-accordion-item>
 7 |     </my-accordion>
 8 |   </article>
 9 | </template>
10 | 
11 | <script lang="ts" setup>
12 | const items = [
13 |   {
14 |     title: "foo bar",
15 |     content:
16 |       "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum nesciunt quas voluptatem quis commodi excepturi, aspernatur quia doloribus suscipit sed illo, omnis quisquam sapiente iusto adipisci amet aperiam necessitatibus deserunt."
17 |   },
18 |   {
19 |     title: "baz qux",
20 |     content:
21 |       "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium a quod facilis. Quam at doloremque, amet ullam earum iusto quia rem nihil impedit itaque labore vel neque repellat, inventore quaerat."
22 |   }
23 | ];
24 | </script>
25 | 


--------------------------------------------------------------------------------
/playground/pages/with-vue-bindings.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <button @click="updateValues">
 4 |       Update Lit element from Vue
 5 |     </button>
 6 | 
 7 |     <my-element :name="name" @my-event="updateValues">
 8 |       <span slot="prepend">
 9 |         <SimpleMessage :message="prependText" />
10 |       </span>
11 | 
12 |       <span slot="append">
13 |         <p>{{ appendText }}</p>
14 |       </span>
15 |     </my-element>
16 |   </div>
17 | </template>
18 | 
19 | <script lang="ts" setup>
20 | import { ref } from 'vue'
21 | 
22 | const name = ref('foo')
23 | const prependText = ref('Vue component in prepend slot')
24 | const appendText = ref('Regular paragraph in append slot')
25 | 
26 | function updateValues () {
27 |   const now = new Date()
28 |   const time = now.toLocaleTimeString()
29 | 
30 |   name.value = `foo (Updated: ${time})`
31 |   prependText.value = `Vue component in prepend slot (Updated: ${time})`
32 |   appendText.value = `Regular paragraph in append slot (Updated: ${time})`
33 | }
34 | 
35 | </script>
36 | 


--------------------------------------------------------------------------------
/src/runtime/plugins/antiFouc.server.ts:
--------------------------------------------------------------------------------
 1 | import { defineNuxtPlugin, useHead } from "#imports";
 2 | 
 3 | /**
 4 |  * This plugin is used to prevent the Flash Of Unstyled Content (FOUC) in browsers
 5 |  * that do not support native Declarative Shadow Dom (DSD).
 6 |  *
 7 |  * This is done by adding a "dsd-pending" attribute to the body element if the browser
 8 |  * does not support native DSD. This attribute hides the body element until the
 9 |  * polyfill has been loaded and applied. Thereby, preventing the FOUC.
10 |  */
11 | export default defineNuxtPlugin(() => {
12 |   useHead({
13 |     style: [
14 |       {
15 |         innerHTML: "body[dsd-pending] { display: none; }"
16 |       }
17 |     ],
18 |     script: [
19 |       {
20 |         children: `
21 | {
22 |   const hasNativeDsd =
23 |     Object.hasOwnProperty.call(HTMLTemplateElement.prototype, "shadowRootMode") ||
24 |     Object.hasOwnProperty.call(HTMLTemplateElement.prototype, "shadowRoot");
25 | 
26 |   if (!hasNativeDsd) {
27 |       document.body.setAttribute('dsd-pending', 'true');
28 |   }
29 | }`,
30 |         tagPosition: "bodyOpen"
31 |       }
32 |     ]
33 |   });
34 | });
35 | 


--------------------------------------------------------------------------------
/.github/workflows/release-please.yml:
--------------------------------------------------------------------------------
 1 | on:
 2 |   push:
 3 |     branches:
 4 |       - main
 5 | name: release-please
 6 | jobs:
 7 |   release-please:
 8 |     runs-on: ubuntu-latest
 9 |     steps:
10 |       - uses: google-github-actions/release-please-action@v3
11 |         id: release
12 |         with:
13 |           release-type: node
14 |           package-name: nuxt-ssr-lit
15 |       # The logic below handles the npm publication:
16 |       - uses: actions/checkout@v2
17 |         # these if statements ensure that a publication only occurs when
18 |         # a new release is created:
19 |         if: ${{ steps.release.outputs.release_created }}
20 |       - uses: actions/setup-node@v1
21 |         with:
22 |           node-version: 20
23 |           registry-url: 'https://registry.npmjs.org'
24 |         if: ${{ steps.release.outputs.release_created }}
25 |       - run: npm ci
26 |         if: ${{ steps.release.outputs.release_created }}
27 |       - run: npm run dev:prepare
28 |         if: ${{ steps.release.outputs.release_created }}
29 |       - run: npm run build
30 |         if: ${{ steps.release.outputs.release_created }}
31 |       - run: npm publish
32 |         env:
33 |           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
34 |         if: ${{ steps.release.outputs.release_created }}


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022-present Nuxt-SSR-Lit Contributors
 4 | - Prashant Palikhe ([@prashantpalikhe](https://github.com/@prashantpalikhe))
 5 | - Steve Workman ([@steveworkman](https://github.com/@steveworkman))
 6 | 
 7 | Permission is hereby granted, free of charge, to any person obtaining a copy
 8 | of this software and associated documentation files (the "Software"), to deal
 9 | in the Software without restriction, including without limitation the rights
10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11 | copies of the Software, and to permit persons to whom the Software is
12 | furnished to do so, subject to the following conditions:
13 | 
14 | The above copyright notice and this permission notice shall be included in all
15 | copies or substantial portions of the Software.
16 | 
17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23 | SOFTWARE.
24 | 


--------------------------------------------------------------------------------
/playground/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <article>
 3 |     <my-element>I am a SSR-ed Lit element</my-element>
 4 | 
 5 |     <br />
 6 | 
 7 |     <my-element theme="light">
 8 |       <my-accordion slot="prepend" foo="bar">
 9 |         <my-accordion-item id="firstAccordionItem" title="foo bar" open>
10 |           Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum nesciunt quas voluptatem quis commodi
11 |           excepturi, aspernatur quia doloribus suscipit sed illo, omnis quisquam sapiente iusto adipisci amet aperiam
12 |           necessitatibus deserunt.
13 |         </my-accordion-item>
14 | 
15 |         <my-accordion-item id="secondAccordionItem" title="baz qux">
16 |           Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium a quod facilis. Quam at doloremque, amet
17 |           ullam earum iusto quia rem nihil impedit itaque labore vel neque repellat, inventore quaerat.
18 |         </my-accordion-item>
19 |       </my-accordion>
20 | 
21 |       <ComponentWrappingLitElement class="i-should-exist" />
22 | 
23 |       <div slot="append"><ComponentWithInject /> and I am appended</div>
24 |     </my-element>
25 |   </article>
26 | </template>
27 | 
28 | <script setup lang="ts">
29 | import { provide } from "vue";
30 | 
31 | provide("injectedVariable", "I am injected");
32 | </script>
33 | 


--------------------------------------------------------------------------------
/playground/wc/my-element.ts:
--------------------------------------------------------------------------------
 1 | import { LitElement, css, html } from "lit";
 2 | 
 3 | export class MyElement extends LitElement {
 4 |   static properties = {
 5 |     name: { type: String },
 6 |     theme: { type: String }
 7 |   };
 8 | 
 9 |   static styles = css`
10 |     .my-element {
11 |       background-color: black;
12 |       color: white;
13 |       padding: 16px;
14 |     }
15 | 
16 |     .my-element--light {
17 |       background-color: gray;
18 |       color: black;
19 |     }
20 | 
21 |     button {
22 |       background: wite;
23 |       color: black;
24 |       border-radius: 4px;
25 |       border: none;
26 |       padding: 8px;
27 |       margin: 12px 0;
28 |       cursor: pointer;
29 |     }
30 |   `;
31 | 
32 |   constructor() {
33 |     super();
34 |     this.name = "default";
35 |     this.theme = "dark";
36 |   }
37 | 
38 |   onButtonClick() {
39 |     console.log("Lit button clicked");
40 |     const event = new CustomEvent("my-event", {
41 |       detail: {
42 |         message: "Something important happened"
43 |       }
44 |     });
45 |     this.dispatchEvent(event);
46 |   }
47 | 
48 |   render() {
49 |     return html` <div class="my-element my-element--${this.theme}">
50 |       <slot name="prepend">Default prepend text</slot>
51 |       <div>
52 |         <button type="button" @click="${this.onButtonClick}"><slot>Lit button with name "${this.name}"</slot></button>
53 |       </div>
54 |       <slot name="append">Default append text</slot>
55 |     </div>`;
56 |   }
57 | }
58 | 
59 | customElements.define("my-element", MyElement);
60 | 


--------------------------------------------------------------------------------
/playground/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <header>
 4 |       <nav>
 5 |         <ul>
 6 |           <li>
 7 |             <NuxtLink to="/"> Default </NuxtLink>
 8 |           </li>
 9 |           <li>
10 |             <NuxtLink to="/with-vue-bindings"> With Vue bindings </NuxtLink>
11 |           </li>
12 |           <li>
13 |             <NuxtLink to="/nested-lit-element-in-slot"> Nested Lit element in slot </NuxtLink>
14 |           </li>
15 |           <li>
16 |             <NuxtLink to="/vue-component-in-slot"> Vue component in slot </NuxtLink>
17 |           </li>
18 |           <li>
19 |             <NuxtLink to="/multiple-different-element-tags"> Multiple different element tags </NuxtLink>
20 |           </li>
21 |           <li>
22 |             <NuxtLink to="/simple-element"> A different element </NuxtLink>
23 |           </li>
24 |           <li>
25 |             <NuxtLink to="/attribute-testing"> Testing different attributes </NuxtLink>
26 |           </li>
27 |           <li>
28 |             <NuxtLink to="/with-v-for"> With v-for </NuxtLink>
29 |           </li>
30 |           <li>
31 |             <NuxtLink to="/with-v-if"> With v-if </NuxtLink>
32 |           </li>
33 |           <li>
34 |             <NuxtLink to="/with-provide-inject"> With provide/inject </NuxtLink>
35 |           </li>
36 |           <li>
37 |             <NuxtLink to="/fallthrough-attributes"> Fallthrough attributes </NuxtLink>
38 |           </li>
39 |         </ul>
40 |       </nav>
41 |     </header>
42 | 
43 |     <main>
44 |       <NuxtPage />
45 |     </main>
46 |   </div>
47 | </template>
48 | 


--------------------------------------------------------------------------------
/src/runtime/utils/litElementRenderer.ts:
--------------------------------------------------------------------------------
 1 | import type { VNodeProps } from "vue";
 2 | import { LitElementRenderer } from "@lit-labs/ssr/lib/lit-element-renderer.js";
 3 | import { getCustomElementConstructor, isCustomElementTag } from "./customElements";
 4 | 
 5 | export function createLitElementRenderer(tagName: string, props: VNodeProps): LitElementRenderer | null {
 6 |   if (!isCustomElementTag(tagName)) {
 7 |     return null;
 8 |   }
 9 | 
10 |   const renderer = new LitElementRenderer(tagName);
11 |   attachPropsToRenderer(renderer, props);
12 | 
13 |   return renderer;
14 | }
15 | 
16 | function attachPropsToRenderer(renderer: LitElementRenderer, props: VNodeProps): LitElementRenderer {
17 |   const customElementConstructor = getCustomElementConstructor(renderer.tagName);
18 | 
19 |   if (props) {
20 |     for (const [key, value] of Object.entries(props)) {
21 |       // check if this is a reactive property
22 |       if (
23 |         customElementConstructor !== null &&
24 |         typeof customElementConstructor !== "string" &&
25 |         key in customElementConstructor.prototype
26 |       ) {
27 |         const isBooleanProp = customElementConstructor.elementProperties.get(key)?.type === Boolean;
28 | 
29 |         if (isBooleanProp && value === "") {
30 |           // handle key only boolean props e.g. <my-element disabled></my-element>
31 |           renderer.setProperty(key, true);
32 |         } else {
33 |           renderer.setProperty(key, value);
34 |         }
35 |       } else {
36 |         renderer.setAttribute(key, value as string);
37 |       }
38 |     }
39 |   }
40 | 
41 |   return renderer;
42 | }
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-ssr-lit",
 3 |   "version": "1.6.32",
 4 |   "license": "MIT",
 5 |   "type": "module",
 6 |   "exports": {
 7 |     ".": {
 8 |       "import": "./dist/module.mjs",
 9 |       "require": "./dist/module.cjs"
10 |     }
11 |   },
12 |   "main": "./dist/module.cjs",
13 |   "types": "./dist/types.d.ts",
14 |   "files": [
15 |     "dist"
16 |   ],
17 |   "scripts": {
18 |     "build": "nuxt-module-build",
19 |     "dev": "nuxi dev playground",
20 |     "dev:build": "nuxi build playground",
21 |     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
22 |     "lint": "eslint \"src/**/*.*\"  --fix",
23 |     "test": "vitest run tests",
24 |     "test:watch": "vitest"
25 |   },
26 |   "dependencies": {
27 |     "@lit-labs/ssr": "3.2.2",
28 |     "@nuxt/kit": "^3.16.2",
29 |     "@vue/compiler-core": "^3.5.13",
30 |     "@vue/compiler-sfc": "^3.5.13",
31 |     "@webcomponents/template-shadowroot": "^0.2.1",
32 |     "magic-string": "^0.30.12",
33 |     "ufo": "^1.5.4"
34 |   },
35 |   "devDependencies": {
36 |     "@commitlint/cli": "^17.2.0",
37 |     "@commitlint/config-conventional": "^17.2.0",
38 |     "@nuxt/module-builder": "^0.8.4",
39 |     "@nuxt/schema": "^3.16.2",
40 |     "@nuxt/test-utils-edge": "^3.8.0-28284309.b3d3d7f4",
41 |     "@nuxtjs/eslint-config-typescript": "^12.1.0",
42 |     "@vue/eslint-config-prettier": "^9.0.0",
43 |     "@vue/eslint-config-typescript": "^12.0.0",
44 |     "cheerio": "^1.0.0-rc.12",
45 |     "eslint": "^8.56.0",
46 |     "eslint-config-prettier": "^9.1.0",
47 |     "eslint-plugin-prettier": "^5.1.2",
48 |     "eslint-plugin-vue": "^9.19.2",
49 |     "husky": "^8.0.3",
50 |     "nuxt": "^3.16.2",
51 |     "prettier": "^3.1.1",
52 |     "typescript": "^5.3.3",
53 |     "vitest": "^0.31.1"
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/module.ts:
--------------------------------------------------------------------------------
 1 | import { defineNuxtModule, addPlugin, createResolver, addVitePlugin, addComponent } from "@nuxt/kit";
 2 | import { name, version } from "../package.json";
 3 | import autoLitWrapper from "./runtime/plugins/autoLitWrapper";
 4 | 
 5 | export interface NuxtSsrLitOptions {
 6 |   litElementPrefix: string | string[];
 7 | }
 8 | 
 9 | export default defineNuxtModule<NuxtSsrLitOptions>({
10 |   meta: {
11 |     name,
12 |     version,
13 |     configKey: "ssrLit"
14 |   },
15 |   defaults: {
16 |     litElementPrefix: []
17 |   },
18 |   async setup(options, nuxt) {
19 |     nuxt.options.nitro.moduleSideEffects = nuxt.options.nitro.moduleSideEffects || [];
20 |     nuxt.options.nitro.moduleSideEffects.push("@lit-labs/ssr/lib/render-lit-html.js");
21 | 
22 |     const { resolve } = createResolver(import.meta.url);
23 | 
24 |     addPlugin(resolve("./runtime/plugins/antiFouc.server"));
25 |     addPlugin(resolve("./runtime/plugins/polyfill.client"));
26 |     addPlugin(resolve("./runtime/plugins/hydrateSupport.client"));
27 | 
28 |     await addComponent({
29 |       name: "LitWrapper",
30 |       filePath: resolve("./runtime/components/LitWrapper.vue")
31 |     });
32 | 
33 |     await addComponent({
34 |       name: "LitWrapperClient",
35 |       filePath: resolve("./runtime/components/LitWrapperClient")
36 |     });
37 | 
38 |     await addComponent({
39 |       name: "LitWrapperServer",
40 |       filePath: resolve("./runtime/components/LitWrapperServer")
41 |     });
42 | 
43 |     const isCustomElement = nuxt.options.vue.compilerOptions.isCustomElement || (() => false);
44 |     nuxt.options.vue.compilerOptions.isCustomElement = (tag) =>
45 |       (Array.isArray(options.litElementPrefix)
46 |         ? options.litElementPrefix.some((p) => tag.startsWith(p))
47 |         : tag.startsWith(options.litElementPrefix)) || isCustomElement(tag);
48 | 
49 |     addVitePlugin(
50 |       autoLitWrapper({
51 |         litElementPrefix: options.litElementPrefix,
52 |         sourcemap: !!nuxt.options.sourcemap.server || !!nuxt.options.sourcemap.client
53 |       })
54 |     );
55 |   }
56 | });
57 | 


--------------------------------------------------------------------------------
/playground/wc/accordion/accordion-item.ts:
--------------------------------------------------------------------------------
 1 | import { LitElement, css, html, unsafeCSS } from "lit";
 2 | import { customElement, property } from "lit/decorators.js";
 3 | import componentStyles from "./accordion-item.css?inline";
 4 | 
 5 | export class AccordionItem extends LitElement {
 6 |   static get properties() {
 7 |     return {
 8 |       title: { type: String, reflect: true },
 9 |       open: { type: Boolean, reflect: true }
10 |     };
11 |   }
12 | 
13 |   /**
14 |    * Apply styles
15 |    */
16 |   static get styles() {
17 |     return [
18 |       css`
19 |         ${unsafeCSS(componentStyles)}
20 |       `
21 |     ];
22 |   }
23 | 
24 |   declare open: boolean;
25 | 
26 |   constructor() {
27 |     super();
28 |     this.open = false;
29 |   }
30 | 
31 |   /**
32 |    * Methods
33 |    */
34 |   show() {
35 |     this.open = true;
36 |     this.dispatchEvent(new CustomEvent("accordion-item-show", { bubbles: true }));
37 |   }
38 | 
39 |   hide() {
40 |     this.open = false;
41 |     this.dispatchEvent(new CustomEvent("accordion-item-hide", { bubbles: true }));
42 |   }
43 | 
44 |   toggle() {
45 |     this.open ? this.hide() : this.show();
46 |   }
47 | 
48 |   _handleKeyDown(event: KeyboardEvent) {
49 |     if (event.key === "ArrowDown" || event.key === "ArrowRight") {
50 |       return this.show();
51 |     }
52 | 
53 |     if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
54 |       return this.hide();
55 |     }
56 |   }
57 | 
58 |   /**
59 |    * Render
60 |    */
61 |   render() {
62 |     return html`<div class="accordion-item">
63 |       <button
64 |         id="invoker"
65 |         class="accordion-item__invoker"
66 |         aria-controls="content"
67 |         aria-expanded=${this.open}
68 |         tabindex="0"
69 |         @click=${this.toggle}
70 |         @keydown=${this._handleKeyDown}
71 |       >
72 |         <span class="accordion-item__title">${this.title}</span>
73 |         <span class="accordion-item__icon">${this.open ? "-" : "+"}</span>
74 |       </button>
75 | 
76 |       <div class="accordion-item__content" id="content" role="region" aria-labelledby="invoker" ?hidden=${!this.open}>
77 |         <slot></slot>
78 |       </div>
79 |     </div>`;
80 |   }
81 | }
82 | if (!customElements.get("my-accordion-item")) {
83 |   customElement("my-accordion-item")(AccordionItem);
84 | }
85 | 


--------------------------------------------------------------------------------
/src/runtime/components/LitWrapperServer.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { defineComponent, ssrUtils, mergeProps } from "vue";
 3 | import type { ComponentInternalInstance } from "vue";
 4 | import { ssrRenderVNode, ssrRenderAttrs } from "@vue/server-renderer";
 5 | import { LitElementRenderer } from "@lit-labs/ssr/lib/lit-element-renderer.js";
 6 | import { createLitElementRenderer } from "../utils/litElementRenderer";
 7 | 
 8 | type PushFn = Parameters<typeof ssrRenderVNode>[0];
 9 | 
10 | export default defineComponent({
11 |   ssrRender(
12 |     ctx: ComponentInternalInstance["proxy"],
13 |     push: PushFn,
14 |     litWrapperInstance: ComponentInternalInstance,
15 |     litWrapperAttrs: Record<string, unknown>
16 |   ) {
17 |     const [litElementVNode] = litWrapperInstance.slots.default!();
18 |     const litElementTagName = String(litElementVNode.type);
19 | 
20 |     const litElementVNodeProps = litElementVNode.props || {};
21 |     const renderer = createLitElementRenderer(litElementTagName, litElementVNodeProps);
22 | 
23 |     if (!renderer) {
24 |       return null;
25 |     }
26 | 
27 |     try {
28 |       renderer.connectedCallback();
29 | 
30 |       const attributes = ssrRenderAttrs(mergeProps(litElementVNodeProps, litWrapperAttrs));
31 | 
32 |       push(
33 |         `<${litElementTagName}${attributes} defer-hydration="true"><template shadowrootmode="open" shadowroot="open">`
34 |       );
35 | 
36 |       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
37 |       // @ts-ignore
38 |       for (const shadowContent of renderer.renderShadow({
39 |         elementRenderers: [LitElementRenderer],
40 |         customElementInstanceStack: [renderer],
41 |         customElementHostStack: [renderer]
42 |       }) as Iterable<string>) {
43 |         push(shadowContent);
44 |       }
45 | 
46 |       push(`</template>`);
47 | 
48 |       // Render the LitElement slot
49 |       const litElementChildren = litElementVNode.children
50 |         ? Array.isArray(litElementVNode.children)
51 |           ? litElementVNode.children
52 |           : [litElementVNode.children]
53 |         : [];
54 | 
55 |       litElementChildren.forEach((child) => ssrRenderVNode(push, ssrUtils.normalizeVNode(child), litWrapperInstance));
56 | 
57 |       push(`</${litElementTagName}>`);
58 |     } catch (e) {
59 |       // eslint-disable-next-line no-console
60 |       console.error(e);
61 | 
62 |       return null;
63 |     }
64 |   }
65 | });
66 | </script>
67 | 


--------------------------------------------------------------------------------
/playground/wc/simple-button.ts:
--------------------------------------------------------------------------------
  1 | import { css, html, LitElement, type PropertyDeclarations, type TemplateResult } from "lit";
  2 | import { customElement } from "lit/decorators.js";
  3 | 
  4 | const styles = css`
  5 |   :host {
  6 |     display: inline-flex;
  7 |   }
  8 | 
  9 |   :host(:focus) {
 10 |     outline: none;
 11 |   }
 12 | 
 13 |   :host([hidden]) {
 14 |     display: none;
 15 |   }
 16 | 
 17 |   :host button {
 18 |     align-items: center;
 19 |     background: red;
 20 |     border: 1px solid #919191;
 21 |     border-radius: 0.2rem;
 22 |     color: #fff;
 23 |     cursor: pointer;
 24 |     display: flex;
 25 |     font-family: sans-serif;
 26 |     outline: none;
 27 |     transition: all 0.4s;
 28 |     width: 100%;
 29 |   }
 30 | 
 31 |   :host button:hover {
 32 |     background: #5e5e5e;
 33 |     border-color: #5e5e5e;
 34 |   }
 35 | 
 36 |   :host button:active {
 37 |     background: #3b3b3b;
 38 |     border-color: #3b3b3b;
 39 |   }
 40 | 
 41 |   :host button:focus {
 42 |     border-color: white;
 43 |     box-shadow: 0 0 0 1px #919191, inset 0 0 0 1px #919191;
 44 |   }
 45 | 
 46 |   :host button:disabled {
 47 |     background: #8ac7fc;
 48 |     border-color: #8ac7fc;
 49 |     color: #919191;
 50 |     cursor: not-allowed;
 51 |   }
 52 | `;
 53 | 
 54 | export default class SimpleButton extends LitElement {
 55 |   static styles = styles;
 56 |   declare disabled;
 57 | 
 58 |   constructor() {
 59 |     super();
 60 |     this.disabled = false;
 61 |   }
 62 | 
 63 |   static get properties(): PropertyDeclarations {
 64 |     return {
 65 |       disabled: { type: Boolean, reflect: true }
 66 |     };
 67 |   }
 68 | 
 69 |   _button?: HTMLButtonElement | null;
 70 | 
 71 |   connectedCallback(): void {
 72 |     super.connectedCallback();
 73 |     this.addEventListener("click", this);
 74 |   }
 75 | 
 76 |   disconnectedCallback(): void {
 77 |     super.disconnectedCallback();
 78 |     this.removeEventListener("click", this);
 79 |   }
 80 | 
 81 |   firstUpdated(): void {
 82 |     this._button = this.querySelector("button");
 83 |   }
 84 | 
 85 |   handleEvent(evt: Event): void {
 86 |     evt.stopPropagation();
 87 |     this._button?.focus();
 88 |   }
 89 | 
 90 |   render(): TemplateResult {
 91 |     return html`
 92 |       <button ?disabled=${this.disabled}>
 93 |         <slot></slot>
 94 |       </button>
 95 |     `;
 96 |   }
 97 | }
 98 | 
 99 | if (!customElements.get("simple-button")) {
100 |   customElement("simple-button")(SimpleButton);
101 | }
102 | 


--------------------------------------------------------------------------------
/playground/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-module-playground",
 3 |   "lockfileVersion": 3,
 4 |   "requires": true,
 5 |   "packages": {
 6 |     "": {
 7 |       "name": "my-module-playground",
 8 |       "dependencies": {
 9 |         "lit": "^3.1.3"
10 |       }
11 |     },
12 |     "node_modules/@lit-labs/ssr-dom-shim": {
13 |       "version": "1.2.0",
14 |       "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
15 |       "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
16 |     },
17 |     "node_modules/@lit/reactive-element": {
18 |       "version": "2.0.4",
19 |       "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz",
20 |       "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==",
21 |       "dependencies": {
22 |         "@lit-labs/ssr-dom-shim": "^1.2.0"
23 |       }
24 |     },
25 |     "node_modules/@types/trusted-types": {
26 |       "version": "2.0.7",
27 |       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
28 |       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
29 |     },
30 |     "node_modules/lit": {
31 |       "version": "3.1.3",
32 |       "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.3.tgz",
33 |       "integrity": "sha512-l4slfspEsnCcHVRTvaP7YnkTZEZggNFywLEIhQaGhYDczG+tu/vlgm/KaWIEjIp+ZyV20r2JnZctMb8LeLCG7Q==",
34 |       "dependencies": {
35 |         "@lit/reactive-element": "^2.0.4",
36 |         "lit-element": "^4.0.4",
37 |         "lit-html": "^3.1.2"
38 |       }
39 |     },
40 |     "node_modules/lit-element": {
41 |       "version": "4.0.5",
42 |       "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.5.tgz",
43 |       "integrity": "sha512-iTWskWZEtn9SyEf4aBG6rKT8GABZMrTWop1+jopsEOgEcugcXJGKuX5bEbkq9qfzY+XB4MAgCaSPwnNpdsNQ3Q==",
44 |       "dependencies": {
45 |         "@lit-labs/ssr-dom-shim": "^1.2.0",
46 |         "@lit/reactive-element": "^2.0.4",
47 |         "lit-html": "^3.1.2"
48 |       }
49 |     },
50 |     "node_modules/lit-html": {
51 |       "version": "3.1.3",
52 |       "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.3.tgz",
53 |       "integrity": "sha512-FwIbqDD8O/8lM4vUZ4KvQZjPPNx7V1VhT7vmRB8RBAO0AU6wuTVdoXiu2CivVjEGdugvcbPNBLtPE1y0ifplHA==",
54 |       "dependencies": {
55 |         "@types/trusted-types": "^2.0.2"
56 |       }
57 |     }
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/tests/playground/basic.spec.ts:
--------------------------------------------------------------------------------
 1 | // basic.test.js
 2 | import { fileURLToPath } from "node:url";
 3 | import { describe, it, expect } from "vitest";
 4 | import { setup, $fetch } from "@nuxt/test-utils-edge";
 5 | import * as cheerio from "cheerio";
 6 | 
 7 | describe("ssr", async () => {
 8 |   await setup({
 9 |     rootDir: fileURLToPath(new URL("../../playground", import.meta.url))
10 |   });
11 | 
12 |   it("renders the index page with a single simple element", async () => {
13 |     const html = await $fetch("/");
14 |     expect(html).toContain(
15 |       '<my-element defer-hydration="true"><template shadowrootmode="open" shadowroot="open"><style>'
16 |     );
17 |     expect(html).toContain("<!--/lit-part--></template>I am a SSR-ed Lit element</my-element>");
18 |   });
19 | 
20 |   it("renders multiple different element tags when supplied", async () => {
21 |     const html = await $fetch("/multiple-different-element-tags");
22 |     expect(html).toContain(
23 |       '<my-element defer-hydration="true"><template shadowrootmode="open" shadowroot="open"><style>'
24 |     );
25 |     expect(html).toContain("<!--/lit-part--></template>I am a SSR-ed Lit element</my-element>");
26 |     expect(html).toContain(
27 |       '<simple-button defer-hydration="true"><template shadowrootmode="open" shadowroot="open"><style>'
28 |     );
29 |     expect(html).toContain("<!--/lit-part--></template>And so am I</simple-button>");
30 |   });
31 | 
32 |   it("renders nested lit components", async () => {
33 |     const html = await $fetch("/nested-lit-element-in-slot");
34 |     expect(html).toContain(
35 |       '<my-element defer-hydration="true"><template shadowrootmode="open" shadowroot="open"><style>'
36 |     );
37 |     expect(html).toContain(
38 |       '<!--/lit-part--></template><div slot="prepend">I am a Lit element within another Lit element</div></my-element>'
39 |     );
40 |   });
41 | 
42 |   it("renders component attributes", async () => {
43 |     const html = await $fetch("/simple-element");
44 |     expect(html).toContain(
45 |       '<simple-button disabled defer-hydration="true"><template shadowrootmode="open" shadowroot="open"><style>'
46 |     );
47 |   });
48 | 
49 |   it("renders boolean property correctly on server", async () => {
50 |     const html = await $fetch("/");
51 |     const $ = cheerio.load(html);
52 | 
53 |     expect($(".accordion-item__content").eq(0).attr()?.hidden).toBeUndefined();
54 |     expect($(".accordion-item__content").eq(1).attr()?.hidden).toBeDefined();
55 |   });
56 | 
57 |   it("renders provide/inject correctly on server", async () => {
58 |     const html = await $fetch("/with-provide-inject");
59 | 
60 |     const $ = cheerio.load(html);
61 |     expect($("#injectedVariable").text()).toBe("I am injected");
62 |   });
63 | 
64 |   it("renders the fallthrough attributes correctly on server", async () => {
65 |     const html = await $fetch("/fallthrough-attributes");
66 | 
67 |     const $ = cheerio.load(html);
68 | 
69 |     expect($(".this-class-should-exist").length).toBe(1);
70 |     expect($(".this-class-should-also-exist").length).toBe(1);
71 |     expect($("[data-attr-should-exist]").length).toBe(1);
72 |     expect($("[data-attr-should-also-exist]").length).toBe(1);
73 |   });
74 | 
75 |   it("renders element with child that should defer hydration", async () => {
76 |     const html = await $fetch("/simple-parent");
77 |     expect(html).toContain("<simple-child defer-hydration>");
78 |   });
79 | });
80 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nuxt-ssr-lit
 2 | 
 3 | A Nuxt3 module for server-side rendering and client-side hydration of Lit custom elements.
 4 | 
 5 | ## 🚀 Usage
 6 | 
 7 | _Note: This module is for Nuxt3._ Please see this issue [on Nuxt2 support](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/9). We are looking for assistance in finishing up the module.
 8 | 
 9 | ### Installation
10 | 
11 | Install `nuxt-ssr-lit`.
12 | 
13 | ```shell
14 | npx nuxi@latest module add ssr-lit
15 | ```
16 | 
17 | Add following code to modules section of nuxt.config.js.
18 | 
19 | ```js
20 | import { defineNuxtConfig } from "nuxt";
21 | 
22 | export default defineNuxtConfig({
23 |   modules: [
24 |     ["nuxt-ssr-lit", { litElementPrefix: ["acme-"] }]
25 |     // ...
26 |   ]
27 | });
28 | ```
29 | 
30 | That's it! Now all the Lit elements prefixed with `acme-` will be server-side rendered. If there are any other custom elements in the project they will be client-side rendered.
31 | 
32 | ## 👨‍💻 Development
33 | 
34 | - Run `npm run dev:prepare` to generate type stubs.
35 | - Use `npm run dev` to start [playground](./playground) in development mode.
36 | 
37 | ## Common issues
38 | 
39 | ### `TypeError: customElements.get(...) is not a constructor`
40 | 
41 | This error occurs when the Lit element is not properly registered. This can happen because the element is not set up correctly, or it can be due to the element having side effects. You may also only see this error when running in production mode.
42 | 
43 | To fix this, your custom element library can be registered in the `nuxt.config.js` file.
44 | 
45 | ```js
46 | export default defineNuxtConfig({
47 |   ...
48 |   nitro: {
49 |     moduleSideEffects: ["my-custom-element-library"]
50 |   }
51 | });
52 | ```
53 | 
54 | ## How does it work?
55 | 
56 | All the Lit elements in the Nuxt project that uses the prefix(es) provided in the module option are wrapped with a Vue component called [LitWrapper](./src/runtime/components/LitWrapper.vue).
57 | 
58 | This auto-wrapping is done via a Vite Plugin called [AutoLitWrapper](./src/runtime/plugins/autoLitWrapper.ts) and therefore happens during build time. By default, the plugin only operates on Vue files, which helps to optimize performance by avoiding unnecessary processing.
59 | 
60 | So, if there is a Lit element used in one of the components. E.g. `<acme-button>Hello world</acme-button>`, the code that is actually generated and used by Nuxt/Vue will be `<LitWrapper><acme-button>Hello world</acme-button></LitWrapper>`.
61 | 
62 | [The LitWrapper component on the server side](./src/runtime/components/LitWrapperServer.ts) uses the [@lit-labs/ssr](https://www.npmjs.com/package/@lit-labs/ssr)'s [LitElementRenderer](https://github.com/lit/lit/blob/main/packages/labs/ssr/src/lib/lit-element-renderer.ts) to render the wrapped Lit element with [Declarative Shadow DOM](https://web.dev/declarative-shadow-dom/). This makes the Lit component render properly on the browser without having the JS to load and execute and as soon the server HTML is parsed.
63 | 
64 | [The LitWrapper component on the client side](./src/runtime/components/LitWrapperClient.ts) does nothing and let the normal client-side hydration take place.
65 | 
66 | ## Caveats
67 | 
68 | The Lit components are SSR-ed on the Node side by applying a [tiny DOM shim](https://lit.dev/docs/ssr/dom-emulation/) to Node. Not all DOM APIs are available. E.g. getting the assigned slots or children, dispatching custom events, adding event listeners on [lifecycle hooks that are called on the server-side](https://lit.dev/docs/ssr/authoring/#standard-custom-element-and-litelement) will not work. Avoiding such client-side activities on server-run code will take you long way.
69 | 
70 | Also, check the `@lit-labs/ssr`'s [library status](https://lit.dev/docs/ssr/overview/#library-status) for more information.
71 | 


--------------------------------------------------------------------------------
/src/runtime/plugins/autoLitWrapper.ts:
--------------------------------------------------------------------------------
  1 | import { pathToFileURL } from "node:url";
  2 | import { parseURL, parseQuery } from "ufo";
  3 | import type { Plugin } from "vite";
  4 | import MagicString from "magic-string";
  5 | import { parse } from "@vue/compiler-sfc";
  6 | import { transform, NodeTypes } from "@vue/compiler-core";
  7 | import type { NuxtSsrLitOptions } from "../../module";
  8 | 
  9 | const allDirectivesToMove = ["v-for", ":key", "v-if", "v-else-if", "v-else"];
 10 | const directivesToMoveRegex = new RegExp(allDirectivesToMove.map((attr) => `(\\s${attr}(="[^"]*")?)`).join("|"), "gi");
 11 | 
 12 | function isVue(id: string, opts: { type?: Array<"template" | "script" | "style"> } = {}) {
 13 |   // Bare `.vue` file (in Vite)
 14 |   const { search } = parseURL(decodeURIComponent(pathToFileURL(id).href));
 15 |   if (id.endsWith(".vue") && !search) {
 16 |     return true;
 17 |   }
 18 | 
 19 |   if (!search) {
 20 |     return false;
 21 |   }
 22 | 
 23 |   const query = parseQuery(search);
 24 | 
 25 |   // Component async/lazy wrapper
 26 |   if (query.nuxt_component) {
 27 |     return false;
 28 |   }
 29 | 
 30 |   // Macro
 31 |   if (query.macro && (search === "?macro=true" || !opts.type || opts.type.includes("script"))) {
 32 |     return true;
 33 |   }
 34 | 
 35 |   // Non-Vue or Styles
 36 |   const type = "setup" in query ? "script" : (query.type as "script" | "template" | "style");
 37 |   if (!("vue" in query) || (opts.type && !opts.type.includes(type))) {
 38 |     return false;
 39 |   }
 40 | 
 41 |   // Query `?vue&type=template` (in Webpack or external template)
 42 |   return true;
 43 | }
 44 | 
 45 | export default function autoLitWrapper({
 46 |   litElementPrefix = [],
 47 |   sourcemap = false
 48 | }: NuxtSsrLitOptions & { sourcemap?: boolean }) {
 49 |   const litElementPrefixes = Array.isArray(litElementPrefix) ? litElementPrefix : [litElementPrefix];
 50 | 
 51 |   return {
 52 |     name: "autoLitWrapper",
 53 |     enforce: "pre",
 54 |     transform(code: string, id: string) {
 55 |       if (!isVue(id, { type: ["template"] })) {
 56 |         return;
 57 |       }
 58 | 
 59 |       const template = code.match(/<template>([\s\S]*)<\/template>/);
 60 |       if (!template) {
 61 |         return;
 62 |       }
 63 | 
 64 |       if (!litElementPrefixes.some((prefix) => code.includes(`<${prefix}`))) {
 65 |         return;
 66 |       }
 67 | 
 68 |       const ast = parse(code).descriptor.template?.ast;
 69 | 
 70 |       if (!ast) {
 71 |         return;
 72 |       }
 73 | 
 74 |       const s = new MagicString(code);
 75 |       const prefixRegex = new RegExp(`^(${litElementPrefixes.join("|")})`, "i");
 76 | 
 77 |       transform(ast, {
 78 |         nodeTransforms: [
 79 |           (node) => {
 80 |             if (node.type !== NodeTypes.ELEMENT || !prefixRegex.test(node.tag)) {
 81 |               return;
 82 |             }
 83 | 
 84 |             const foundDirectivesToMove = node.props.filter((prop) => allDirectivesToMove.includes(prop.rawName));
 85 | 
 86 |             const directivesToAdd = foundDirectivesToMove.length
 87 |               ? ` ${foundDirectivesToMove.map((attr) => attr.loc.source).join(" ")}`
 88 |               : "";
 89 | 
 90 |             const wrapperStartTag = `<LitWrapper${directivesToAdd}>`;
 91 |             const wrapperEndTag = "</LitWrapper>";
 92 | 
 93 |             const nodeStart = node.loc.start.offset;
 94 |             const nodeEnd = node.loc.end.offset;
 95 | 
 96 |             if (node.isSelfClosing) {
 97 |               /**
 98 |                * Converts
 99 |                *
100 |                * ```html
101 |                * <my-element v-if="someCondition" />
102 |                * ```
103 |                *
104 |                *  to
105 |                *
106 |                * `<LitWrapper v-if="someCondition"><my-element /></LitWrapper>`
107 |                */
108 |               const nodeWithDirectivesRemoved = code
109 |                 .slice(nodeStart, nodeEnd)
110 |                 .replace(directivesToMoveRegex, "")
111 |                 .trim();
112 | 
113 |               s.overwrite(nodeStart, nodeEnd, `${wrapperStartTag}${nodeWithDirectivesRemoved}${wrapperEndTag}`);
114 |             } else {
115 |               /**
116 |                * Converts
117 |                *
118 |                * ```html
119 |                * <my-element v-if="someCondition">
120 |                *  <div>Some content</div>
121 |                * </my-element>
122 |                * ```
123 |                *
124 |                * to
125 |                *
126 |                * ```html
127 |                * <LitWrapper v-if="someCondition">
128 |                *   <my-element>
129 |                *     <div>Some content</div>
130 |                *   </my-element>
131 |                * </LitWrapper>
132 |                * ```
133 |                */
134 |               let contentStart = nodeStart + node.tag.length + 2;
135 |               if (node.props.length > 0) {
136 |                 const lastProp = node.props[node.props.length - 1];
137 |                 contentStart = lastProp.loc.end.offset;
138 |               }
139 | 
140 |               const nodeWithDirectivesRemoved = code
141 |                 .slice(nodeStart, contentStart)
142 |                 .replace(directivesToMoveRegex, "")
143 |                 .trim();
144 | 
145 |               s.overwrite(nodeStart, contentStart, nodeWithDirectivesRemoved);
146 | 
147 |               s.prependLeft(nodeStart, wrapperStartTag);
148 |               s.appendRight(nodeEnd, wrapperEndTag);
149 |             }
150 |           }
151 |         ]
152 |       });
153 | 
154 |       if (s.hasChanged()) {
155 |         return {
156 |           code: s.toString(),
157 |           map: sourcemap ? s.generateMap({ hires: true }) : undefined
158 |         };
159 |       }
160 |     }
161 |   } as Plugin;
162 | }
163 | 


--------------------------------------------------------------------------------
/tests/module/autoLitWrapper.spec.ts:
--------------------------------------------------------------------------------
  1 | import fs from "node:fs/promises";
  2 | import path from "node:path";
  3 | import { describe, test, beforeAll, expect } from "vitest";
  4 | import autoLitWrapper from "../../src/runtime/plugins/autoLitWrapper";
  5 | 
  6 | async function loadFile(pageFileName: string): Promise<string> {
  7 |   return await fs.readFile(path.resolve(path.join(__dirname, "/../../playground/", pageFileName)), {
  8 |     encoding: "utf-8"
  9 |   });
 10 | }
 11 | 
 12 | describe("Lit wrapper plugin", () => {
 13 |   let samplePage = "";
 14 |   let sampleNestedComponentPage = "";
 15 |   let sampleVForPage = "";
 16 |   let sampleVIfPage = "";
 17 | 
 18 |   beforeAll(async () => {
 19 |     samplePage = await loadFile("pages/index.vue");
 20 |     sampleVForPage = await loadFile("pages/with-v-for.vue");
 21 |     sampleVIfPage = await loadFile("pages/with-v-if.vue");
 22 |     sampleNestedComponentPage = await loadFile("pages/nested-lit-element-in-slot.vue");
 23 |   });
 24 | 
 25 |   test("Wraps the template code if there are matching elements", async () => {
 26 |     const plugin = autoLitWrapper({
 27 |       litElementPrefix: ["my-"]
 28 |     });
 29 |     const t = await plugin.transform(samplePage, "src/pages/index.vue");
 30 |     expect(t.code).toContain("<LitWrapper><my-element>I am a SSR-ed Lit element</my-element></LitWrapper>");
 31 |   });
 32 | 
 33 |   test("Wraps the code when multiple different components are present", async () => {
 34 |     const plugin = autoLitWrapper({
 35 |       litElementPrefix: ["my-"]
 36 |     });
 37 |     const t = await plugin.transform(sampleNestedComponentPage, "src/pages/nested-lit-element-in-slot.vue");
 38 |     const expectedCode = `<LitWrapper><my-element>
 39 |     <span slot="prepend">
 40 |     <LitWrapper><my-element @my-event="handleNestedLitElementClick">
 41 |         <div slot="prepend">I am a Lit element within another Lit element</div>
 42 |       </my-element></LitWrapper>
 43 |     </span>
 44 |   </my-element></LitWrapper>`;
 45 | 
 46 |     expect(t.code.replace(/\s+/g, "")).toContain(expectedCode.replace(/\s+/g, ""));
 47 |   });
 48 | 
 49 |   test("Wraps the custom element in a Vue file that is outside the src directory", async () => {
 50 |     const plugin = autoLitWrapper({
 51 |       litElementPrefix: ["my-"]
 52 |     });
 53 |     const t = await plugin.transform(samplePage, "packages/foo-bar/components/page.vue");
 54 |     expect(t.code).toContain("<LitWrapper><my-element>I am a SSR-ed Lit element</my-element></LitWrapper>");
 55 |   });
 56 | 
 57 |   test("Wraps the custom element with v-for and moves the v-for to the wrapper", async () => {
 58 |     const plugin = autoLitWrapper({
 59 |       litElementPrefix: ["my-"]
 60 |     });
 61 |     const t = await plugin.transform(sampleVForPage, "src/pages/with-v-for.vue");
 62 |     expect(t.code).toContain('<LitWrapper v-for="(item, index) in items" :key="item.title"><my-accordion-item');
 63 |     expect(t.code.match(/v-for/g)?.length).toBe(1);
 64 |     expect(t.code.match(/:key/g)?.length).toBe(1);
 65 |   });
 66 | 
 67 |   test("Wraps the custom element with v-if and v-else and moves them to the corresponding wrapper", async () => {
 68 |     const plugin = autoLitWrapper({
 69 |       litElementPrefix: ["my-"]
 70 |     });
 71 |     const t = await plugin.transform(sampleVIfPage, "src/pages/with-v-if.vue");
 72 | 
 73 |     expect(t.code).toContain('<LitWrapper v-if="true"><my-accordion-item');
 74 |     expect(t.code).toContain('<LitWrapper v-else-if="false"><my-accordion-item');
 75 |     expect(t.code).toContain("<LitWrapper v-else><my-accordion-item");
 76 | 
 77 |     expect(t.code.match(/v-if/g)?.length).toBe(1);
 78 |     expect(t.code.match(/v-else/g)?.length).toBe(2);
 79 |   });
 80 | 
 81 |   test("Handles different situations of wrapping", async () => {
 82 |     const plugin = autoLitWrapper({
 83 |       litElementPrefix: ["my-", "some-"]
 84 |     });
 85 |     const sourceCode = `
 86 |     <template>
 87 |       <div>
 88 |         <my-element
 89 |           v-if="true"
 90 |           :key="someKey"
 91 |           some-attr
 92 |           foo="bar"
 93 |           :baz="qux"
 94 |           v-bind="{ ...someObj }"
 95 |           @click="handleClick"
 96 |           @blur="handleBlur()"
 97 |           v-bind:foo="bar"
 98 |           @custom-event="($event) => handleCustomEvent()">
 99 |           <some-element :foo="'bar'" :baz="qux">
100 |             <some-other-element />
101 |           </some-element>
102 |         </my-element>
103 |     
104 |         <my-element v-else-if="2 > 1">Else if</my-element>
105 |         <my-element v-else>
106 |           <do-not-wrap-me />
107 |         </my-element>
108 | 
109 |         <my-element v-for="(item, index) in items" :key="item.title">
110 |           <some-element :foo="'bar'" :baz="qux">
111 |             <some-other-element />
112 |           </some-element>
113 |         </my-element>
114 | 
115 |         <SomeComponent>
116 |           <template #someslot="{ foo }">
117 |             <my-element>
118 |               <some-element :foo="'bar'" :baz="qux">
119 |                 <some-other-element />
120 |               </some-element>
121 |             </my-element>
122 |           </template>
123 |         </SomeComponent>
124 | 
125 |         <my-element :foo="'bar'" key="someKey"       />
126 |         <SomeComponent @click="handleClick" />
127 | 
128 |         <my-element>
129 | 
130 |           <div>Some content {{ someExpression ? someValue1 : someValue 2 }}</div>
131 |         </my-element>
132 |       </div>
133 |     </template>
134 | 
135 |     <script setup lang="ts">
136 |     import { ref } from 'vue';
137 | 
138 |     const someKey = ref<string>('some key');
139 |     </script>
140 |     `;
141 | 
142 |     const expectedCode = `
143 |     <template>
144 |       <div>
145 |         <LitWrapper v-if="true" :key="someKey"><my-element
146 |          
147 |          
148 |           some-attr
149 |           foo="bar"
150 |           :baz="qux"
151 |           v-bind="{ ...someObj }"
152 |           @click="handleClick"
153 |           @blur="handleBlur()"
154 |           v-bind:foo="bar"
155 |           @custom-event="($event) => handleCustomEvent()">
156 |           <LitWrapper><some-element :foo="'bar'" :baz="qux">
157 |             <LitWrapper><some-other-element /></LitWrapper>
158 |           </some-element></LitWrapper>
159 |         </my-element></LitWrapper>
160 |     
161 |         <LitWrapper v-else-if="2 > 1"><my-element>Else if</my-element></LitWrapper>
162 |         <LitWrapper v-else><my-element>
163 |           <do-not-wrap-me />
164 |         </my-element></LitWrapper>
165 | 
166 |         <LitWrapper v-for="(item, index) in items" :key="item.title"><my-element>
167 |           <LitWrapper><some-element :foo="'bar'" :baz="qux">
168 |             <LitWrapper><some-other-element /></LitWrapper>
169 |           </some-element></LitWrapper>
170 |         </my-element></LitWrapper>
171 | 
172 |         <SomeComponent>
173 |           <template #someslot="{ foo }">
174 |             <LitWrapper><my-element>
175 |               <LitWrapper><some-element :foo="'bar'" :baz="qux">
176 |                 <LitWrapper><some-other-element /></LitWrapper>
177 |               </some-element></LitWrapper>
178 |             </my-element></LitWrapper>
179 |           </template>
180 |         </SomeComponent>
181 | 
182 |         <LitWrapper><my-element :foo="'bar'" key="someKey"       /></LitWrapper>
183 |         <SomeComponent @click="handleClick" />
184 | 
185 |         <LitWrapper><my-element>
186 | 
187 |           <div>Some content {{ someExpression ? someValue1 : someValue 2 }}</div>
188 |         </my-element></LitWrapper>
189 |       </div>
190 |     </template>
191 | 
192 |     <script setup lang="ts">
193 |     import { ref } from 'vue';
194 | 
195 |     const someKey = ref<string>('some key');
196 |     </script>
197 |     `;
198 | 
199 |     const t = await plugin.transform(sourceCode, "src/pages/index.vue");
200 | 
201 |     expect(t.code).toBe(expectedCode);
202 |   });
203 | 
204 |   test.skip("Playground", () => {
205 |     const plugin = autoLitWrapper({
206 |       litElementPrefix: ["my-"]
207 |     });
208 | 
209 |     const sourceCode = `
210 |     <template>
211 |       <my-element>test</my-element>
212 |     </template>
213 |     `;
214 | 
215 |     const t = plugin.transform(sourceCode, "src/pages/index.vue");
216 | 
217 |     console.log(t.code);
218 |   });
219 | });
220 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # Changelog
  2 | 
  3 | ## [1.6.32](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.31...v1.6.32) (2025-08-28)
  4 | 
  5 | 
  6 | ### Bug Fixes
  7 | 
  8 | * trigger release after pinning lit labs ssr ([#180](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/180)) ([5d1be1e](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/5d1be1eab1f7c9cf5888c7a1b7630b6b2b182c5b))
  9 | 
 10 | ## [1.6.31](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.30...v1.6.31) (2025-08-28)
 11 | 
 12 | 
 13 | ### Bug Fixes
 14 | 
 15 | * pin lit labs ssr to version 3.2.2 ([#177](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/177)) ([428e0f6](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/428e0f60f180e449ae95559b6e5bcb808e46161b))
 16 | 
 17 | ## [1.6.30](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.29...v1.6.30) (2025-04-03)
 18 | 
 19 | 
 20 | ### Bug Fixes
 21 | 
 22 | * update nuxt to 3.16.2 ([#173](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/173)) ([6cc409b](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/6cc409b4bef87ca9b7996925976038f75c437fc5))
 23 | 
 24 | ## [1.6.29](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.28...v1.6.29) (2025-02-14)
 25 | 
 26 | 
 27 | ### Bug Fixes
 28 | 
 29 | * upgrade vue compiler deps ([#169](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/169)) ([db0f190](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/db0f190efc0098ba2af66d96cb0a6c342ecda650))
 30 | 
 31 | ## [1.6.28](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.27...v1.6.28) (2025-02-14)
 32 | 
 33 | 
 34 | ### Bug Fixes
 35 | 
 36 | * update nuxt to 3.15.4 ([#167](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/167)) ([aaf95e9](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/aaf95e9585eecb8b18382165b9133d263f7f1586))
 37 | 
 38 | ## [1.6.27](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.26...v1.6.27) (2024-11-05)
 39 | 
 40 | 
 41 | ### Bug Fixes
 42 | 
 43 | * update deps ([#165](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/165)) ([fe598b3](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/fe598b3f02e4341ba2692d5cd5880b3a1a746395))
 44 | 
 45 | ## [1.6.26](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.25...v1.6.26) (2024-09-23)
 46 | 
 47 | 
 48 | ### Bug Fixes
 49 | 
 50 | * update vue and nuxt ([#162](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/162)) ([70cec94](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/70cec94a7471a55525ac71a38dedfa796bc00d3c))
 51 | 
 52 | ## [1.6.25](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.24...v1.6.25) (2024-09-04)
 53 | 
 54 | 
 55 | ### Bug Fixes
 56 | 
 57 | * upgrade to nuxt 3.13.1 ([#159](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/159)) ([f1a3196](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/f1a3196ef9779a1b8c34f5726b1528c317b37f0f))
 58 | 
 59 | ## [1.6.24](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.23...v1.6.24) (2024-09-03)
 60 | 
 61 | 
 62 | ### Bug Fixes
 63 | 
 64 | * upgrade Nuxt and Vue to latest ([#157](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/157)) ([ec648a3](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/ec648a3f5ed50f8b721078e008bee526dda84f26))
 65 | 
 66 | ## [1.6.23](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.22...v1.6.23) (2024-07-19)
 67 | 
 68 | 
 69 | ### Bug Fixes
 70 | 
 71 | * update dependencies ([#153](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/153)) ([dec6381](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/dec63815142cb549373ebe8029f7ef0b8687757d))
 72 | 
 73 | ## [1.6.22](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.21...v1.6.22) (2024-07-08)
 74 | 
 75 | 
 76 | ### Bug Fixes
 77 | 
 78 | * use node 20 for release ([#151](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/151)) ([69fccb2](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/69fccb298a269097c7beab65c0b641497c91714f))
 79 | 
 80 | ## [1.6.21](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.20...v1.6.21) (2024-07-08)
 81 | 
 82 | 
 83 | ### Bug Fixes
 84 | 
 85 | * update nuxt and vue ([#149](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/149)) ([f539c58](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/f539c58e390244d0f54c0e5b2a6356614e0a8688))
 86 | 
 87 | ## [1.6.20](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.19...v1.6.20) (2024-06-14)
 88 | 
 89 | 
 90 | ### Bug Fixes
 91 | 
 92 | * upgrade vue compiler ([#147](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/147)) ([0da73f2](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/0da73f2ad6d8928122388091cb0160b86cb36277))
 93 | 
 94 | ## [1.6.19](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.18...v1.6.19) (2024-06-14)
 95 | 
 96 | 
 97 | ### Bug Fixes
 98 | 
 99 | * upgrade Nuxt to 3.12 ([#145](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/145)) ([77c888c](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/77c888c7219ae96318b15fdb378d7357b1e8218f))
100 | 
101 | ## [1.6.18](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.17...v1.6.18) (2024-05-09)
102 | 
103 | 
104 | ### Bug Fixes
105 | 
106 | * use vue compiler for ast generation ([#143](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/143)) ([5796006](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/5796006e6b34e1afcfa64af5a3b47fb1293d762e))
107 | 
108 | ## [1.6.17](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.16...v1.6.17) (2024-04-29)
109 | 
110 | 
111 | ### Bug Fixes
112 | 
113 | * upgrade lit and lit-labs/ssr ([#140](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/140)) ([19f8d03](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/19f8d039796e63b534d8840a00ffc68c8a5314df))
114 | 
115 | ## [1.6.16](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.15...v1.6.16) (2024-04-24)
116 | 
117 | 
118 | ### Bug Fixes
119 | 
120 | * only alter the template for the lit components, nothing else ([#138](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/138)) ([c2dab2a](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/c2dab2a4f73b86208229af8b6e1c9343a60fb891))
121 | 
122 | ## [1.6.15](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.14...v1.6.15) (2024-04-05)
123 | 
124 | 
125 | ### Bug Fixes
126 | 
127 | * updated Nuxt to 3.11.2 ([#135](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/135)) ([66cd171](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/66cd1712043848a39dc92a2a0b4d19bec06cd0f1))
128 | 
129 | ## [1.6.14](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.13...v1.6.14) (2024-04-05)
130 | 
131 | 
132 | ### Bug Fixes
133 | 
134 | * push Lit shadow contents directly in Vue ssr buffer ([#133](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/133)) ([4b920d7](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/4b920d7a8e1549e4532b1fe81f86236b74ed5c79))
135 | 
136 | ## [1.6.13](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.12...v1.6.13) (2024-03-25)
137 | 
138 | 
139 | ### Bug Fixes
140 | 
141 | * opt in to `import.meta.*` properties ([#130](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/130)) ([5037823](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/5037823259d6ac218f09cfc1a3def37bd70355c6))
142 | 
143 | ## [1.6.12](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.11...v1.6.12) (2024-03-17)
144 | 
145 | 
146 | ### Bug Fixes
147 | 
148 | * updated Nuxt to 3.11.0 ([#127](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/127)) ([6a670f3](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/6a670f301c2b26e407b9129b20fc27a7272ae325))
149 | 
150 | ## [1.6.11](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.10...v1.6.11) (2024-03-03)
151 | 
152 | 
153 | ### Bug Fixes
154 | 
155 | * updated Nuxt to 3.10.3 ([#125](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/125)) ([0d8d887](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/0d8d887e7263f71527d53e5a33c02b0ab84c4d29))
156 | 
157 | ## [1.6.10](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.9...v1.6.10) (2024-01-29)
158 | 
159 | 
160 | ### Bug Fixes
161 | 
162 | * updated Nuxt to 3.9.3 ([#121](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/121)) ([a8250f8](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/a8250f849af72320bd6f2de6c7304c1f770e909c))
163 | 
164 | ## [1.6.9](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.8...v1.6.9) (2024-01-10)
165 | 
166 | 
167 | ### Bug Fixes
168 | 
169 | * updated @lit-labs/ssr to 3.2.1 and nuxt to 3.9.1 ([#118](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/118)) ([cd3fd88](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/cd3fd8897edb57ad57bb8fe59c3e5c5520b9f1f2))
170 | 
171 | ## [1.6.8](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.7...v1.6.8) (2024-01-04)
172 | 
173 | 
174 | ### Bug Fixes
175 | 
176 | * updated @lit-labs/ssr to 3.2.0 ([#116](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/116)) ([3aa7800](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/3aa78000ddff14a90c9614ca7130b7f3101a2f97))
177 | 
178 | ## [1.6.7](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.6...v1.6.7) (2023-12-28)
179 | 
180 | 
181 | ### Bug Fixes
182 | 
183 | * update dependencies ([#115](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/115)) ([2b4f893](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/2b4f893006c3bb338e3c215cc68b98d619470111))
184 | * updated Nuxt to 3.9.0 ([#113](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/113)) ([98994a6](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/98994a6c7082294504108f77729e369985b0f56b))
185 | 
186 | ## [1.6.6](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.5...v1.6.6) (2023-12-13)
187 | 
188 | 
189 | ### Bug Fixes
190 | 
191 | * updated Nuxt to 3.8.2 ([#110](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/110)) ([aed67b8](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/aed67b855333a6943c35678b23936c65f0d8cfe3))
192 | 
193 | ## [1.6.5](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.4...v1.6.5) (2023-11-07)
194 | 
195 | 
196 | ### Bug Fixes
197 | 
198 | * correctly defer hydration for child custom elements ([#108](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/108)) ([131172f](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/131172f50468f8718a371b4c4cc40a83ed1e54e2))
199 | 
200 | ## [1.6.4](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.3...v1.6.4) (2023-10-11)
201 | 
202 | 
203 | ### Bug Fixes
204 | 
205 | * updated Nuxt to 3.7.4 ([#104](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/104)) ([c82eacc](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/c82eacc9546f224cccd4ea8efb1a57c535feb4b9))
206 | 
207 | ## [1.6.3](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.2...v1.6.3) (2023-09-23)
208 | 
209 | 
210 | ### Bug Fixes
211 | 
212 | * updated Nuxt to 3.7.3 ([#99](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/99)) ([9dc361f](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/9dc361f8f1f73d00f4e556a8d19a20e95b5d92c6))
213 | 
214 | ## [1.6.2](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.1...v1.6.2) (2023-09-12)
215 | 
216 | 
217 | ### Bug Fixes
218 | 
219 | * issue with fallthrough attributes not working with new server re… ([#97](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/97)) ([d4bf56a](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/d4bf56a559f9272766d0644b48aa60636ac54f8a))
220 | 
221 | ## [1.6.1](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.6.0...v1.6.1) (2023-09-11)
222 | 
223 | 
224 | ### Bug Fixes
225 | 
226 | * updated Nuxt to 3.7.1 ([#95](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/95)) ([f9ce787](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/f9ce78725a30469d0d1f6d7d326103ec7b5171ef))
227 | 
228 | ## [1.6.0](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.5.8...v1.6.0) (2023-09-07)
229 | 
230 | 
231 | ### Features
232 | 
233 | * change the way we render the component on server ([#93](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/93)) ([e36e88e](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/e36e88e1de224958e8cd471f5fe4a70700e3f982))
234 | 
235 | ## [1.5.8](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.5.7...v1.5.8) (2023-08-28)
236 | 
237 | 
238 | ### Bug Fixes
239 | 
240 | * updated ufo to 1.3.0 ([#89](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/89)) ([cfa3a48](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/cfa3a48c50209b0c5cb39216df8f28a87505abec))
241 | 
242 | ## [1.5.7](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.5.6...v1.5.7) (2023-08-28)
243 | 
244 | 
245 | ### Bug Fixes
246 | 
247 | * updated Nuxt to 3.7.0 ([#87](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/87)) ([38bc59f](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/38bc59f050b7da7b5d05ee69924a68b8d75f6ee6))
248 | 
249 | ## [1.5.6](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.5.5...v1.5.6) (2023-07-27)
250 | 
251 | 
252 | ### Bug Fixes
253 | 
254 | * updated Nuxt to 3.6.5 ([#85](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/85)) ([5c0f855](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/5c0f8555dfed12739f6cdb767c214c027812ee07))
255 | 
256 | ## [1.5.5](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.5.4...v1.5.5) (2023-06-27)
257 | 
258 | 
259 | ### Bug Fixes
260 | 
261 | * update Nuxt to 3.6.1 ([#83](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/83)) ([a220816](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/a2208169bd31a3c08d85965559e65c0af7f99d12))
262 | 
263 | ## [1.5.4](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.5.3...v1.5.4) (2023-06-23)
264 | 
265 | 
266 | ### Bug Fixes
267 | 
268 | * update Nuxt to 3.6.0 ([#81](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/81)) ([1f8c5af](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/1f8c5af08a0e09eb8c07870f3bec7c55e1f5a83e))
269 | 
270 | ## [1.5.3](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.5.2...v1.5.3) (2023-06-20)
271 | 
272 | 
273 | ### Bug Fixes
274 | 
275 | * allow nested Lit components to hydrate correctly by self managin… ([#79](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/79)) ([66bad0e](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/66bad0eaf4435ee89b9dcea1ce394f6241aa783e))
276 | 
277 | ## [1.5.2](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.5.1...v1.5.2) (2023-05-18)
278 | 
279 | 
280 | ### Bug Fixes
281 | 
282 | * update Nuxt to 3.5.0 along with other dependencies ([#76](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/76)) ([cad8f69](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/cad8f694c5af39eb2290ab9605391075ec806e3f))
283 | 
284 | ## [1.5.1](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.5.0...v1.5.1) (2023-04-28)
285 | 
286 | 
287 | ### Bug Fixes
288 | 
289 | * wrongly published beta version ([#74](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/74)) ([0200d02](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/0200d02d6a9527e53fcd0dcb91eabedf34693b4a))
290 | 
291 | ## [1.5.0](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.4.4...v1.5.0) (2023-04-18)
292 | 
293 | 
294 | ### Features
295 | 
296 | * upgrade and add support for Nuxt 3.4 ([#71](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/71)) ([8ee6734](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/8ee67348cd97a39be994abb6d49b41a260852c82))
297 | 
298 | ## [1.4.4](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.4.3...v1.4.4) (2023-04-07)
299 | 
300 | 
301 | ### Bug Fixes
302 | 
303 | * correct links on docs ([#69](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/69)) ([f029b4a](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/f029b4a2e90f0d840555ceb39cdf00c9c018baff))
304 | 
305 | ## [1.4.3](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.4.2...v1.4.3) (2023-03-22)
306 | 
307 | 
308 | ### Bug Fixes
309 | 
310 | * delete empty attributes added to nodes by ultrahtml parser ([#66](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/66)) ([3b5fba9](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/3b5fba9624446abfeb90063cbbc074cd69eeabb6))
311 | 
312 | ## [1.4.2](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.4.1...v1.4.2) (2023-03-14)
313 | 
314 | 
315 | ### Bug Fixes
316 | 
317 | * remove beta version creep ([#64](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/64)) ([ba714db](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/ba714db90b96edc93059ad0e29f5cdcc58d20256))
318 | 
319 | ## [1.4.1](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.4.0...v1.4.1) (2023-03-02)
320 | 
321 | 
322 | ### Bug Fixes
323 | 
324 | * move v-if, v-else-if and v-else to the wrapper ([02562d7](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/02562d71d0e8bb809533c27effc672950a523be9))
325 | 
326 | ## [1.4.0](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.3.2...v1.4.0) (2023-02-27)
327 | 
328 | 
329 | ### Features
330 | 
331 | * handle FOUC in browsers without native DSD and support standard… ([#59](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/59)) ([1c072d6](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/1c072d627779bc5d0990e0e50cd62c0a6a1756a7))
332 | 
333 | ## [1.3.2](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.3.1...v1.3.2) (2023-02-25)
334 | 
335 | 
336 | ### Bug Fixes
337 | 
338 | * both shadowroot and shadowrootmode attributes need to be present… ([#57](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/57)) ([a983e2c](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/a983e2c1df806dee3fd9b4b3fafc9444dc94177c))
339 | 
340 | ## [1.3.1](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.3.0...v1.3.1) (2023-02-25)
341 | 
342 | 
343 | ### Bug Fixes
344 | 
345 | * incorrect shadowroot attribute in DSD template, should be shadow… ([#55](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/55)) ([97a7a06](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/97a7a065dc32a11bfbaba236a3e8b509be94ed0f))
346 | 
347 | ## [1.3.0](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.2.2...v1.3.0) (2023-02-23)
348 | 
349 | 
350 | ### Features
351 | 
352 | * add support for v-for by using ultrahtml to transform code ([#53](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/53)) ([4b88b41](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/4b88b4171dc6b3e91a7f1f487f95fe42d0b39d27))
353 | 
354 | ## [1.2.2](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.2.1...v1.2.2) (2023-01-26)
355 | 
356 | 
357 | ### Bug Fixes
358 | 
359 | * handle v-if that results in no vnode and hydrate Lit after Vue ([#49](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/49)) ([e0f832e](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/e0f832e164880d2871bb1b7d529a8cfc037c4841))
360 | 
361 | ## [1.2.1](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.2.0...v1.2.1) (2023-01-20)
362 | 
363 | 
364 | ### Bug Fixes
365 | 
366 | * elementProperties is a Map and not a POJO ([#47](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/47)) ([87a03ef](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/87a03ef06813d629c57c54e2897f2ac5dd159f99))
367 | 
368 | ## [1.2.0](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.1.1...v1.2.0) (2023-01-19)
369 | 
370 | 
371 | ### Features
372 | 
373 | * process vue files outside the src dir ([#45](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/45)) ([84a9e33](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/84a9e33146731413fbba47ce3e06b6629bd4165a))
374 | 
375 | ## [1.1.1](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.1.0...v1.1.1) (2023-01-11)
376 | 
377 | 
378 | ### Bug Fixes
379 | 
380 | * error detecting boolean properties causing renderer to fail. ([#43](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/43)) ([a72c28f](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/a72c28f7dc20fe762018748f7d928f7bf009cdd3))
381 | 
382 | ## [1.1.0](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.0.5...v1.1.0) (2023-01-11)
383 | 
384 | 
385 | ### Features
386 | 
387 | * upgrade to lit-labs/ssr 3.0.0 and Nuxt 3 ([#40](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/40)) ([b3da81b](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/b3da81b4fdbb2468f7bbc4b1f03b3a1d27f20a93))
388 | 
389 | ## [1.0.5](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.0.4...v1.0.5) (2022-11-22)
390 | 
391 | 
392 | ### Bug Fixes
393 | 
394 | * **#36:** always load the dom shim if the nuxt-ssr-lit module is used ([#37](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/37)) ([c95ca36](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/c95ca36d9a6412a036e42f81c1fee784a0324af1))
395 | 
396 | ## [1.0.4](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.0.3...v1.0.4) (2022-11-17)
397 | 
398 | 
399 | ### Bug Fixes
400 | 
401 | * properties of elements can be incorrectly rendered. Fixes [#30](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/30) ([#31](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/31)) ([ea32b7f](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/ea32b7ff01444817bfaeeb65f865537968f4dcb4))
402 | 
403 | ## [1.0.3](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.0.2...v1.0.3) (2022-11-15)
404 | 
405 | 
406 | ### Bug Fixes
407 | 
408 | * changed config key to ssrLit. Fixes [#27](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/27) ([#28](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/28)) ([184fb57](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/184fb573c8e5a38d8e5262d8d686093a8c80b785))
409 | 
410 | ## [1.0.2](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.0.1...v1.0.2) (2022-11-14)
411 | 
412 | 
413 | ### Bug Fixes
414 | 
415 | * upgrade release process to node 16 ([#25](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/25)) ([01a5c2a](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/01a5c2acafe7390ffa3e87669dc118ff0d5dcb7b))
416 | 
417 | ## [1.0.1](https://github.com/prashantpalikhe/nuxt-ssr-lit/compare/v1.0.0...v1.0.1) (2022-11-14)
418 | 
419 | 
420 | ### Bug Fixes
421 | 
422 | * add build step to release-please ([416419e](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/416419e4a71ab5029542b4885610207105dc9c58))
423 | * release-please doesn't auto-release ([206bf28](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/206bf28a585c632851143e21a5666e84a437c899))
424 | 
425 | ## 1.0.0 (2022-11-14)
426 | 
427 | ### Features
428 | 
429 | * add support for default slot ([ea7a08c](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/ea7a08cea3c3025d7a1d602f295daf1630a8881e))
430 | * auto wrap lit elements ([333b682](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/333b6825d43fa99691aee7f051bb690cfa8a9492))
431 | * log out ssr error ([b80c19e](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/b80c19e48b38e2eb217336971276934f7a229748))
432 | * setup module ([9c1de9b](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/9c1de9bc096096470f1aca4e8745db8c86768810))
433 | * take control of client and sever components ([#16](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/16)) ([d19475d](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/d19475d6537bd70b5f916ac3acd0636a0fe9ae77))
434 | * update playground test cases ([84d19fd](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/84d19fdaabb7e6c5cbe7a2c2c93aeb89eb47e5e2))
435 | * update playground to include many test scenarios ([48c8981](https://github.com/prashantpalikhe/nuxt-ssr-lit/commit/48c898192f6056ff75ed577e5363090bea63c1cc))
436 | 


--------------------------------------------------------------------------------