<content> 在 angular.dart 组件中的用法？答案

【问题标题】：Usage of <content> in angular.dart components?<content> 在 angular.dart 组件中的用法？
【发布时间】：2014-08-01 20:44:21
【问题描述】：

这个答案中提到的方法：https://stackoverflow.com/a/19818178/194642 似乎不再起作用了。如何在 angular.dart 组件中使用 web 组件的元素？

@Component(
selector: "custom-elem",
template: "<div id='container-elem'> <content></content></div>")
class CustomElem extends ShadowRootAware{
  onShadowRoot(_) {
    //do something
  }
}

现在，我期待以下 html 片段：

<custom-elem> 
  <span>Sample content</span>
</custom-elem>

在#shadow-root内引起关注：

<div id='container-elem'>
  <content> 
    <span>Sample content</span>
  </content>
</div>

【问题讨论】：

您能否发布一些代码 sn-ps 来演示您想要做什么？
@GünterZöchbauer 添加了一个示例 sn-p

标签： dart angular-dart

【解决方案1】：

我不确定我是否正确理解了您的问题或您的预期结果，但<content> 标签的工作方式是<span>Sample content</span> 是<custom-elem> 的孩子，其中<div id='container-elem'> 被放入@987654325 的Shadow DOM 中@ before 子元素和 </div> 在 <custom-elem> after 子元素的 Shadow DOM 中，但 <span> 在 light DOM 中，就像使用时一样

<div> 
  <span>Sample content</span>
</div>

当您检查 <custom-elem> 的 Shadow DOM 时，您的 Angular 组件中应该只有 template 部分。

【讨论】：