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