Investigate if the wrapping element can be avoided altogether

[prashantpalikhe]

Currently, the <LitWrapper /> component wraps the slotted Lit element with a <span />. Investigate if this can be avoided altogether using Vue's render function.

[steveworkman]

The linting rule preventing this is https://eslint.vuejs.org/rules/no-multiple-template-root.html - meaning that you can render the <slot> at the top level but only in Vue 3. Also, inside the server component we have a v-html directive, which can be applied directly to the root <template> though falls foul of https://eslint.vuejs.org/rules/valid-template-root.html and it also produces some hydration issues.

I don't believe that a render function is going to solve either of these issues. More likely is the rendering functions used in https://github.com/kevinpschaaf/next-wc-ssr/blob/main/pages/index.js could provide a different approach. However, what we have now is a wrapping approach (similar to Eleventy and Astro) and it will work.

To get around the extra <div> I've applied display: unset to it, which makes the browser ignore its box. That works in all the cases I've tried so far

[steveworkman]

Some more research, in Vue 3 a customRenderer can be made to control how we render these elements. There doesn't appear to be an equivalent function for Vue 2

[steveworkman]

This was fixed in #18