嵌套聚合物模板继承答案

【问题标题】：Nested polymer template inheritance嵌套聚合物模板继承
【发布时间】：2014-01-28 02:25:40
【问题描述】：

有没有办法用其父模板包围聚合物子模板？

在以下示例中，影子标签将父模板带入子视图，但它忽略了其内容：

母聚合物元素

<polymer-element name="my-window">
  <template>
    <div class="windowframe">
      <p>test</p> <!-- can be shown with shadow tag -->
      <content></content> <!-- cannot be used with shadow tag -->

子聚合物元素

<polymer-element name="my-window-example" extends="my-window">
  <template>
    <!-- get the hosts' shadow and insert here -->
    <shadow>
       <p>Here is the content of my window<p> <!--won't be shown -->
    </shadow>
  </template>

【问题讨论】：

您能否详细说明您要完成的工作？

标签： dart dart-polymer polymer web-component shadow-dom

【解决方案1】：

这使用在 Chrome Canary 中是可能的（参见 this blog post、this discussion、the fixed spec bug 和 the fixed Chromium bug），但不幸的是它似乎不适合我在 Linux 上的 Chrome 33.0.1750.22 dev 或 Windows 上的 Chrome 34.0.1809.0 canary 中不再使用“启用实验性 Web 平台功能”标志或关闭。试试this jsbin 看看它是否适合你。

更新：Confirmed。由于“实施问题”，此功能已从 Chrome 中 Shadow DOM 的初始实施中删除。

【讨论】：

【解决方案2】：

我猜你需要<content> 标记的<content> 标记的select='selector' 属性之类的功能，您可以在其中从较旧的阴影中选择一些节点并使用一个<shadow> 标记定位它们并选择和用第二个<shadow> 标签定位其余部分。

不过，我还没有发现任何关于此的信息，而且我很确定这不受支持。

这个讨论可能很有趣https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/zR64jebST4c

【讨论】：