元素嵌入答案

【问题标题】：Element transclusion元素嵌入
【发布时间】：2014-06-26 07:00:11
【问题描述】：

聚合物中有没有类似 angularjs 指令的 transclude 属性的东西？是什么让我可以将一些元素包含到模板中的特定位置？

我想实现以下目标：

<my-header title="My title">
    <my-header-item name="Item 1"></my-header-item>
    <my-header-item name="Item 2"></my-header-item>
</my-header>

可以表达：

<h1>My title</h1> <!-- "My title" given by my-header's title attribute -->
<ul>
    <li>Item 1 <!-- given by my-header-item -->
    <li>Item 2
</ul>

我不确定这是聚合物的任务还是这是使用聚合物的典型方式。我问，因为我开始喜欢聚合物，我想保持惯用思维。

【问题讨论】：

标签： angularjs polymer shadow-dom transclusion

【解决方案1】：

在 Shadow DOM 领域，这称为分发。要将 light DOM 节点分布到 shadow dom 中，请使用 <content> 插入点。

http://www.polymer-project.org/platform/shadow-dom.html#shadow-dom-subtrees

从字面上看，这是一种将 light dom 中的节点渲染到 shadow dom 中的占位符的方法。如果你想用 my-header/my-header-item 标题/名称属性做一些棘手的事情，你可以这样做：

<polymer-element name="my-header">
  <template>
    <ul>
      <template repeat="{{item in items}}">
        <li>{{item.name}}</li>
      </template>
    </ul>
    <content id="c" select="my-header-item"></content>
  </template>
  <script>
   Polymer('my-header', {
     domReady: function() {
       this.items = [].slice.call(this.$.c.getDistributedNodes());
     }
   });
  </script>
</polymer-element>

演示：http://jsbin.com/hupuwoma/1/edit

我在https://github.com/ebidel/polymer-experiments/blob/master/polymer-and-angular/together/elements/wc-tabs.html 上有一个更完善的标签演示，用于完成此设置。

【讨论】：

【解决方案2】：

诚然，我对聚合物也很陌生 - 我想我可以回答这个问题。

您应该能够使用双胡须语法将属性的值替换到模板中，例如

<h1>{{title}}</h1>

见http://www.polymer-project.org/docs/start/creatingelements.html#publishing

除此之外，您还可以替换标签的内容。例如，如果不是在 my-header-item 标记中使用“名称”属性，而是使用类似这样的东西......

<my-header-item>Item 1</my-header-item>

那么您可以像这样替换“第 1 项”：

<li><content></content></li>

有关此用法，请参阅 http://www.polymer-project.org/platform/shadow-dom.html

【讨论】：