将模板元素插入插槽元素

Question

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

<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 来摆脱不必要的（有时是破坏风格的）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>

有没有办法将多个元素发送到一个插槽中而不先包装它们？

Answer 1

好的，事实证明您可以简单地在多个元素上使用 slot 属性；

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

虽然这非常难读且繁琐。它只是感觉不像是好的代码。在我看来，能够使用 template[slot] 会更好。

将模板元素插入插槽元素

Insert template element into slot element

aurelia

aurelia-templating