我的自定義聚合物標簽的InnerHTML覆蓋了其中的所有內容<template>

Question

我只是不知道如何告訴我的自定義元素在哪里呈現自定義標簽的內部html，即：

<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="my-element" noscript>
  <template>
    <span>Hello from <b>my-element</b>. This is my Shadow DOM.</span>
  </template>
</polymer-element>

<my-element>Hi!</my-element>

渲染：

嗨！

我希望能夠告訴我的組件在何處以及如何使用自定義元素標簽之間的內容。

Answer 1

要從外部（燈光dom）引入元素並將其渲染到陰影dom內部，您需要使用<content>標簽定義插入點：

<polymer-element name="my-element" noscript>
  <template>
    <span>Hello from <b>my-element</b>. This is my Shadow DOM.</span>
    <content></content>
  </template>
</polymer-element>

演示： http ： //jsbin.com/najiquzivofu/1/edit

您還可以使用select attr選擇特定的子代：

<polymer-element name="my-element2" noscript>
  <template>
    <span>Hello from <b>my-element</b>. This is my Shadow DOM.</span>
    <content select="p"></content>
  </template>
</polymer-element>

<my-element2>
  <div>This won't render</div>
  <p>This will because the insertion point invites it in the shadow dom</p>
</my-element2>

參見http://www.polymer-project.org/platform/shadow-dom.html#shadow-dom-subtrees和http://www.html5rocks.com/zh-CN/tutorials/webcomponents/shadowdom-301/#toc-分布式節點更多。

Answer 2

只需在<template>內添加<content></content> <template> 。

<polymer-element name="my-element" noscript>
  <template>
    <span>Hello from <b>my-element</b>. This is my Shadow DOM.</span>
    <content></content> Polymer,
  </template>
</polymer-element>

<my-element>Hi!</my-element>

渲染器

您好， my-element 。 這是我的Shadow DOM。

嗨！ 聚合物，

供參考： Shadow DOM