How to render a Lit element component in a Nuxt 3 project?

Question

I'm encountering difficulties when integrating Lit elements into a Nuxt project, particularly with server-side rendering (SSR). My Lit component renders correctly when the site is rendered client-side (by setting ssr: false in nuxt.config), but I face issues when using the default SSR mode. The error message I receive is: "HTMLElement is not defined." I understand the root cause of this issue and have attempted various solutions, but none have been successful.

I've explored the following resources and methods:

• The GitHub repository nuxt-ssr-lit, which is a Nuxt3 module designed for server-side rendering and client-side hydration of Lit custom elements.
• A workaround that involves defining HTMLElement globally: global.HTMLElement = typeof window === 'undefined' ? Object : window.HTMLElement;.

Despite consulting various AI platforms, none of the solutions provided have resolved my issue. I'm hoping a human perspective might offer a different approach or insight.

Thanks in advance!

Sidenote: I don't really care if the Lit component has to built or not prior to using it in a Nuxt project. The component itself does not have to be server side rendered either, as long as can render it in a Nuxt project.