Question

我想知道如何在自定义聚合物组件中的特定块中呈现子元素。 E.g

这是我的自定义组件的用法：

<my-custom>
    <div>stuff to render</div>
</my-custom>

我的自定义组件的声明：

<polymer-element name="my-custom" noscript>
    <template>
        <div id="stuffToRenderWrapper">
            <content />
        </div>
    </template>
</polymer-element>

使用上面的代码，我的dom看起来像下面这样。

<div>Stuff to render</div>
<div id="stuffToRenderWrapper"></div>

好的id：stuffToRenderWrapper在阴影dom和div中：渲染的东西不是。这里的问题是如何渲染要在包装器内呈现的东西？

Answer 1

我认为你不能使用自我关闭<content>元素。

这应该有效：

<polymer-element name="x-foo" noscript>
  <template>
    <style>
      #stuffToRender ::content h1 {
        color: red;
      }
      #stuffToRender ::content h2 {
        color: blue;
      }
    </style>
    <div id="stuffToRender">
      <content></content>
    </div>
  </template>
</polymer-element>

<x-foo>
  <h1>I am an h1</h1>
  <h2>I am an h2</h2>
</x-foo>

确保将polyfill-next-selector添加到这些::内容样式，以便它们可以在其他浏览器中使用

渲染特定块内的子元素

1 个答案: