Aurelia 2 containerless

Help Requests
1

I’ve noticed that the containerless attribute in Aurelia 2 doesn’t work as it did in Aurelia 1. Adding this attribute to my custom element doesn’t do anything

This:

<my-element prop1.bind="value" containerless></my-element>

still renders the my-element wrapper. Is there a different way of doing this in Au 2?

2

In the cheatsheet there is a example of with and without conventions under custom elements. Not sure if that would be what your looking for.

3

Thanks @airboss001, I saw that, but I want to declare it as an attribute on the HTML, not in the custom element’s view model. This is especially useful when defining and then using in-line custom elements.

4

Ok, worth a shot.
Did you see if the module version worked? Might be easy to add/create the custom attribute back if so perhaps?

5

I appreciate it’s not always equivalent, but we’ve found display: contents; has largely replaced containerless for us - where we were mostly needing to avoid the element existing because of CSS.

3 Likes
6

I have a similar problem with the following template using FastUI

<template as-custom-element="child-tree-node">
    <bindable name="child"></bindable>
    <fast-tree-item :key="child.id">
        ${child.label}
        <child-tree-node repeat.for="subchild of child.children" child.bind="subchild" style="display: contents"></child-tree-node>
    </fast-tree-item>
</template>

<fast-tree-view>
    <child-tree-node repeat.for="item of items" child.bind="item" style="display: contents"></child-tree-node>
</fast-tree-view>

The rendering in this case is wrong because the css for the fast-tree-item element is not applied if it is contained in another tag. In fact display: contents visually removes the container, but it still exists in the application of the css.

So, it seems that the only way to avoid interferences by the “as-custom-element” template is to have the template tag being removed.

As indicated here in the Aurelia 2 docs, it seems possible to have a directive, but it is not clear how to apply it since it seems to be an unformed tag. I tried anyway, but obviously the unclosed tag prevents the page from rendering, but even closing it does not have the desired effect.

Perhaps it applies only to components and not to “as-custom-element” templates.

7

You can also do this

<fast-tree-view>
    <child-tree-node
        repeat.for="item of items"
        child.bind="item"
        style="display: contents"
        containerless></child-tree-node>
</fast-tree-view>
8

Thank you very much @bigopon, in a first attempt I had foolishly applied the containerless attribute on the template tag thinking it was a feature of the template. In fact, it makes more sense for it to be outside so you can choose when to apply it or not.