在Aurelia中渲染没有中间DOM节点的组件

Question

是否可以直接在Aurelia中呈现自定义元素模板而无需额外的自定义元素包装器节点？

例如,比方说,我有一个像这样的组件:

// -- component.js
export class UiComponent {}

// -- component.html
<template>
    <div class="ui-component">
        { ... some content ... }
    </div>
</template>

...我有一个包装器组件渲染ui组件,如下所示:

// -- wrapper.js
export class UiWrapper {}

// -- wrapper.html
<template>
    <require from="/path/to/component.js"></require>

    <div class="ui-wrapper">
        <ui-component></ui-component>
    </div>
</template>

这将导致DOM树看起来像这样:

<ui-wrapper>
    <div class="ui-wrapper">
        <ui-component>
            <div class="ui-component">
                { ... some content ... }
            </div>
        </ui-component>
    </div>
</ui-wrapper>

---

问题:是否可以在没有自定义元素生成的额外标记噪声的情况下呈现DOM？

<div class="ui-wrapper">
    <div class="ui-component">
        { ... some content ... }
    </div>
</div>

---

为什么我要这个:

• 我不喜欢自定义自定义元素包装器的样式(即,<ui-component>或者<ui-wrapper>.我相信它是标记噪声,因为我无法操纵它的类,也不能直接在它上面附加事件处理程序.

• 在使用的元素上repeat.for,我不能简单地使用:last-childcss选择器.我将不得不添加另一个类检查使用${ $last ? 'is-last-child' : '' },再次,是标记噪音.

• 这些中间元素打破了其中的任何内容.而不是像真正的边距(当边距"碰撞"时一起折叠),我的边距在组件之间加倍,因为自定义元素节点将边缘编辑元素包装在块容器中而没有任何边距.

---

我希望一切都有道理.谢谢.

Answer 1

您可以使用

    // -- component.js
    import {containerless} from 'aurelia-framework';

    @containerless
    export class UiComponent {}

描述在这里