Question

我有一个自定义元素，它定义了一个带有各种可绑定默认选项的通用UI窗口小部件框架，一个模板部件，用于添加一些额外的工具栏＆＃39;身体的选项和通用<content />。

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

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

这是一个简单的例子：

eg-block（Widget）元素

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

eg-list（Admin）元素

<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元素中保留widget / block元素的使用，但是让它以我希望的方式呈现？

Answer 1

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

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

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

与此同时，自定义元素视图中的元素必须位于模板的根目录中。至于Aurelia这样做的原因，那就是bug :-)它已在新的implementation中得到修复。

我们刚刚发布了一个关于新插槽实现的blog post，如果您想看看它是如何工作的。

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

1 个答案: