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>

Answer 2

尽管@ robdodson的答案是完全正确的，但感觉......也是如此......＆＃34;松散＆＃34;。

在工作中进一步讨论时，有人注意到＆＃34; Composition over inheritance＆＃34;的原则。这导致我从不同的（我认为更好的）角度来看待这种情况。

我最终得到了这个（还包括传递参数的例子）：

- x-foo.html

<polymer-element name="x-foo" arguments="status">
  <template>
    <style>
      #wrapper.valid ::content p { color: green; }
      #wrapper.invalid ::content p { color: red; }
    </style>
    <section id="wrapper">
      <p>x-bar will be put in the content tag below</p>
      <content></content>
    </section>
  </template>
  <script>
    Polymer({
      status: '',
      statusChanged: function(oldVal, newVal) {
        if (['valid', 'invalid'].indexOf(newVAl) === -1) {
          this.$.wrapper.setAttribute('class', newVal);
        }
      }
    });
  </script>
</polymer-element>

- x-bar.html

<link rel="import" href="x-foo.html" arguments="status">

<polymer-element name="x-bar">
  <template>
    <x-foo status="{{status}}">
      <p>color me</p>
    </x-foo>
  </template>
  <script>
    Polymer();
  </script>
</polymer-element>

- index.html

<link rel="import" href="x-bar.html" arguments="status">
<x-bar></x-bar>

唯一的缺点＆＃34;你必须传递＆＃34;状态＆＃34;。但这感觉好一点，然后不得不追加到一个＆＃34;漂浮＆＃34;超类中的div＃wrapper

Polymer：围绕child包装父元素

2 个答案: