在 Aurelia w/o 中间 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>。我认为这是标记噪声，因为我无法操纵它的 class是的，我也不能直接在上面附加事件处理程序。
在使用 repeat.for 的元素上，我不能简单地使用 :last-child css 选择器。我将不得不使用 ${ $last ? 'is-last-child' : '' } 添加另一个 class 检查，这又是标记噪声。
这些中间元素打破了其中任何内容的边距。我的边距不像真正的边距（当边距 "collide" 时一起折叠），而是在组件之间加倍，因为自定义元素节点将带边距的元素包装在没有任何边距的块容器中。

我希望一切都有意义。谢谢。

Answer 1

您可以使用

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

    @containerless
    export class UiComponent {}

如描述here

在 Aurelia w/o 中间 DOM 节点中渲染组件

rendering components in Aurelia w/o the intermediate DOM Node

html

javascript

css

dom

aurelia