在对aurelia组件使用无容器功能时，我看到了奇怪的行为。我们正在SVG容器中创建自定义元素，这要求我们使用无容器标签剥离自定义元素标签，然后再将其添加到DOM，因为SVG容器中仅允许SVGElements标签。
我们正在使用Aurelia版本1.0.0，并使用webpack构建SPA。
在这里，您可以找到一个gistrun示例，其中显示了无容器用法的两种实现。
https://gist.run/?id=58ba6282ad54c1263eec3a141fe42183
在此示例中，我创建了2个视图模型并将其绑定到我们的自定义元素。使用as-element="compose"告诉aurelia我已经创建了viewmodel，而Aurelia不应该创建VM。这些与自定义元素之间的区别是无容器标签：
CustomElement在Viewmodel中没有@containerless标记，但在HTML视图中具有“ containerless”。
withattr组件在HTML视图中没有“ containerless”，但在Viewmodel中确实具有@containerless标记，如Aurelia HUB中所述。
我期望在两种情况下都可以看到一个蓝色矩形。由于无容器标签，Aurelia剥离了customelement标签。但是@containerless标记似乎不起作用，如实现2所示。
题：
为什么这些实现有不同的输出？
哪个是正确的？我希望2，如Aurelia文档中所述，@containerless标记应放在视图模型上。
任何帮助，将不胜感激 ：）
最佳答案
@containerless装饰器直接在放置它的元素上工作。
发生的事情是将装饰器应用于您的withattr元素，但是as-element="compose"将其转换为引擎盖下的compose元素。然后，此compose元素没有应用@containerless标记。
同样，对于您的customelement，您实际上不是将@containerless应用于customelement，而是应用于将其转换为的compose。
删除as-element="compose"部分，只需在标记中声明您的<withattr/>元素为裸色，并且containerless将起作用，因为实际元素仍为withattr。
请注意，不建议将@containerless与as-element一起使用，除非没有其他方法可以完成某件事，就像在table元素内使用自定义元素的情况一样。
为什么不简单在自定义元素中添加compose并通过自定义元素上的可绑定属性将路径绑定到视图？
编辑
抱歉，我有点忽略了您想指定自己的ViewModel实例的事实。
此要求将您限制为使用compose元素，因为这是Aurelia支持提供自己的ViewModel实例的唯一方法。
还可以确定您需要@containerless。并且您需要将该@containerless放在compose元素上。
结束语，从技术角度来看，您的第一个解决方案似乎完美无缺。
根据个人喜好，我会这样做：<compose containerless view.bind="'./customelement.html'" view-model.bind="customElementViewModel"/>
代替这个：<customelement containerless as-element="compose" view-model.bind="customElementViewModel"/>
为了更加灵活地使用动态视图，请更清楚地说明我们正在使用compose，而不必使用<require>视图。但这实际上归结为偏好和其他要求。
关于javascript - 在VM上使用'@containerless'和在自定义元素的HTML View 中使用'containerless'时的区别，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39706019/