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/en/tutorials/webcomponents/shadowdom-301/#toc-distributed-nodes。

Answer 2

只需在<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

我的自定义聚合物标签的InnerHTML会覆盖<template> </template>中的所有内容

2 个答案:

呈现