Provide/inject breaks when a Vue component is used as a slot of a SSR-ed Lit element

[prashantpalikhe]

Describe the bug When a Vue component is used as a slot of an SSR-ed Lit element, it cannot inject dependencies provided by the parent component using provide.

<template>
  <i-provide-some-dependencies>
    <some-lit-element>
      <i-inject-some-dependencies></i-inject-some-dependencies>
    </some-lit-element>
  </i-provide-some-dependencies>
</template>

Here, <i-inject-some-depdencies /> is not able to actually inject the dependencies provided by <i-provide-some-dependencies />.

To Reproduce

1. Run the playground locally
2. Go to /with-provide-inject page
3. See that injected variable is not available during SSR and a hydration mismatch warning is logged in the browser console

Expected behavior Provided dependencies should be injectable in children components used within a slot of an SSR-ed Lit element.

Screenshots

• Nuxt version: 3.7.0
• Browser: All

Additional context This happens because the module renders a slot for a Lit element during SSR using renderToString. This leads to the loss of parent context. Better to use SSR primitives like ssrRenderVNode, ssrRenderAttrs, and ssrRender render hook.