What problem does this feature solve?

I need use named slots in web-components, which are nested in vue components. This feature solve problem with named slots in webComponent. Code in template will be injected into shadowRoot.

Pull issue: https://github.com/vuejs/core/pull/6368

This will be rendered to:

What does the proposed API look like?

I forked branch and I added this code https://github.com/vuejs/core/pull/6368/commits/6515f34578f13db2e79e879db4bce8c1b973c8a7#diff-a76582b8bbc7775f5a45fe4518abb808080429939a0102d3e768dfa17be6f172

Example of use

index.html

<ce-epicrisis id = "testWidget">
    <template ce-right-slot-header>
        <span style = "color: # af72dd;"> __ Example header slot__ </span>
    </template>
    <template ce-footer-slot>
        <span style = "color: # af72dd;"> __ Example header slot__ </span>
    </template>
</ce-epicrisis>

nestedComponent.vue

  <div class = "header-wrapper" data-provide-ce-right-slot-header>
    <h2 class = "widget-title"> {{translateTitle}} </h2>
  </div>

In the web-component, add 'template' with the attribute by which it will be recognized - e.g. ce-right-slot-header

In the component, add an attribute starting with 'data-provide' plus the name we provided in the template, that is: data-provide-ce-right-slot-header

On this basis, the web-component will be rendered and the value from template will be embedded in it.

Good idea, it would be really helpfull.