将模板元素插入插槽元素

我构建了一个带有几个命名插槽的自定义元素,如下所示:

<template>
    <header>
        <slot name="header"></slot>
    </header>
    <slot name="body"></slot>
    <footer>
        <slot name="footer"></slot>
    </footer>
</template>

我这样使用它:

<my-custom-element>
    <div slot="header">
        <h1>Title</h1>
        <p>Description</p>
    </div>
    <div slot="body">
        <h2>Body content</h2>
        <p>Body content</p>
        <p>Body content</p>
    </div>
    <div slot="footer">
        <p>Copyright 2018</p>
        <ul>
            <li>Facebook</li>
            <li>Twitter</li>
            <li>Instagram</li>
        </ul>
    </div>
</my-custom-element>

然而,正如您在我的DOM中看到的那样 header > div > content , footer > div > content 等

我想我可以用 template 元素而不是 div 为了摆脱不必要的(有时还会破坏风格) 部门 不幸的是,这似乎不起作用:

<my-custom-element>
    <template slot="header">
        <h1>Title</h1>
        <p>Description</p>
    </template>
    <template slot="body">
        <h2>Body content</h2>
        <p>Body content</p>
        <p>Body content</p>
    </template>
    <template slot="footer">
        <p>Copyright 2018</p>
        <ul>
            <li>Facebook</li>
            <li>Twitter</li>
            <li>Instagram</li>
        </ul>
    </template>
</my-custom-element>

有没有一种方法可以将多个元素发送到一个插槽中,而无需先包装它们?