Aurelia 中的嵌套自定义元素未按预期呈现

Question

我有一个自定义元素，它定义了一个具有各种可绑定默认选项的通用 UI 小部件框架、一个用于添加一些额外“工具栏”选项的模板部分和用于正文的通用 <content />。

然后，我有另一个用于某些管理功能的自定义元素。后一个元素应该将自己呈现为一个小部件，并且它也有各种模板部分。

但是，如果我尝试将前一个小部件元素嵌入到后一个管理元素中，则不会呈现任何内容。

这是一个简化的例子：

eg-block (Widget) 元素

<template>
  <div style="padding: 10px; background-color: #bbffff">
    <content></content>
  </div>
</template>

例如列表（管理员）元素

<template>
  <require from="./eg-block"></require>
  <eg-block>
    <div>Start of List</div>
    <content></content>
    <template replaceable part="list-part">Default List Part</template>
    <div>End of List</div>
  </eg-block>
</template>

包含页面

<template>
  <require from="./eg-list"></require>
  <eg-list>
    <template replace-part="list-part">Replaced List Part content</template>
    <div>Replaced regular content</div>
  </eg-list>
</template>

我希望结果是：

<div style="padding: 10px; background-color: #bbffff">
  <div>Start of List</div>
  <div>Replaced regular content</div>
  <div>Replaced List Part content</div>
  <div>End of List</div>
</div>

但它给了我：

<div style="padding: 10px; background-color: #bbffff">
  <div>Start of List</div>
  <div>End of List</div>
  <div>Default List Part</div>
</div>

因此它不会呈现列表的内容或包含页面中指定的替换模板部分。但除此之外，列表模板部分的默认内容实际上是在 列表之后呈现的。

这是预期的行为吗？如果是这样，有什么方法可以在 admin/list 元素中保留小部件/块元素的使用，但让它按照我希望的方式呈现？

Answer 1

我主要是从this question 复制/粘贴我的答案，但这里是：

让我先说 Aurelia RC1 中的内容投影正在完全改变（并且变得更好）。我们正在转向基于插槽的内容投影，以匹配最新版本的 shadow DOM 规范。该规范比 Aurelia 当前的基于选择器的设置（基于早期版本的 Shadow DOM 规范）强大得多。这是从现在到 Aurelia 完整 1.0 期间我们计划的唯一重大更改。

所以我告诉你的一切很快就会过时。

与此同时，您的自定义元素视图中的元素需要位于模板的根目录。至于 Aurelia 为何如此行事，那是bug:-) 它已在新的implementation 中修复。

我们刚刚发布了关于新插槽实现的blog post，如果您想看看事情将如何运作。