Question

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

例如，比方说，我有一个像这样的组件：

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

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

...我有一个包装组件渲染ui-component，如：

// -- 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-child css选择器。我将不得不使用${ $last ? 'is-last-child' : '' }添加另一个类检查，这又是标记噪音。
这些中间元素打破了内部元素的边缘。而不是像真正的边距（当边距“碰撞”时一起折叠），我的边距在组件之间加倍，因为自定义元素节点将边缘编辑元素包装在块容器中而没有任何边距。

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

Answer 1

您可以使用

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

    @containerless
    export class UiComponent {}

如here

所述

使用中间DOM节点

1 个答案: