Polymer:将父元素包裹在子元素周围

Question

使用 Polymer 可以轻松扩展另一个 Web 组件。您可以使用<shadow>在子模板中标记父阴影 dom 所在的位置 ( polymer docs )。

我正在寻找扩展一个元素，但是以一种子元素的特定部分被父元素包裹的方式。我在一些模板引擎中使用过这种设置。这可以通过 html include 来完成吗？

父级::

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

<polymer-element name="tpl-parent" noscript>
  <template>
    <section>
      <content></content><!-- put the child template here -->
    </section>
  </template>
</polymer-element>

child ::

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

<polymer-element name="tpl-child" extends="tpl-parent" noscript>
  <template>
    <shadow>
      <p>whatever I put here should be "wrapped" by the _section_ in parent</p>
    </shadow>
  </template>
</polymer-element>

Answer 1

你不能像这样声明式地做到这一点。但我认为您可以利用自动节点查找将子节点移动到父节点的部分(如果它有 id)。

<polymer-element name="x-foo">
  <template>
    <style>
      #wrapper p { color: red; }
    </style>
    <section id="wrapper">
      <p>Hello from x-foo</p>
    </section>
  </template>
  <script>
    Polymer({

    });
  </script>
</polymer-element>

<polymer-element name="x-bar" extends="x-foo">
  <template>
    <p id="foo">I was wrapped by x-foo</p>
    <p>I was not wrapped</p>
    <shadow></shadow>
  </template>
  <script>
    Polymer({
      domReady: function() {
        this.$.wrapper.appendChild(this.$.foo);
      }
    });
  </script>
</polymer-element>

<x-bar></x-bar>