scoped v-slot on non component / template tags in Vue 3

[mattbrailsford]

I'm probably a little late to the game on the new v-slots RFC as I know it has already been merged, but I wanted to highlight an approach I follow that prevents me from using this syntax and see if there is any way to support this approach or whether we can allow v-slot on non component / template tags.

Essentially, I do a lot of server rendered web site development (in .NET) where SEO is really important. In order to ensure the core content of a site is rendered at the server end and thus available for search engine indexing I'll tend to use Vue in more of a progressively enhanced way. How this tends to work out is that I use a lot of dynamic components with slots and scopes to expose an API that can be wrapped around my server rendered content.

As a simple example, lets say we have a SiteHeader component which is responsible for holding the behavior for toggling a navigation open and closed. In Vue 2 I would do something like the following:

<template>
    <header>
       <slot v-bind:scope-events="scopeEvents"></slot>
    </header>
</template>
<script>
export default {
    data() {
        return {
            scopeEvents: {
                openNav() { .... },
                closeNav() { .... }
            }
        }
    }
}
</script>

In my server rendered markup I could then do something like the following:

<header is="site-header">
    <nav slot-scope="headerScope">
        <a href="#" v-on:click="headerScope.scopeEvents.openNav">Open Nav</a>
        <a href="#" v-on:click="headerScope.scopeEvents.closeNav">Close Nav</a>
        ....
    </nav>
</header>

The key things here are

1. the markup for the nav is rendered by the server and this indexable and

2. the behavior for controlling the navigation is added only when vue starts up and

3. the content is displayed instantly and is visible even before vue has kicked in.

In vue 3 however this approach isn't quite possible to this extent anymore for a couple of reasons.

1. is no longer allows you to pass just the name of a view to render, instead this needs to be a vue property. It does seem to be possible to do this however with the v-is directive but I'm not sure if my use case is a valid use of it and whether the use of 'v-is' is not recommended? (seemed to be pretty well hidden in the docs)

2. The bigger problem is that I can't declare the slot-scope or v-slot on a regular HTML element anymore, instead needing to wrap my inner content in a <template> tag which would be fine except the template content no longer gets rendered on page load and is hidden until vue kicks in, essentially no longer "progressively enhancing" the markup. I don't claim to be an SEO expert either so I'm not sure if there are any SEO issues with having content in a template tag too or not.

The only other approach I could probably think to do now is maybe something to do with portals but this just feels like it might make this whole setup more complicated.

Would this be a valid vue use case and thus this approach could be considered? or am I better off looking at alternative ways of implementing this, such as using portals? Or, is there even already a better approach I can be using (other than SSR of vue components)?