Polymer 聚合：将父元素包裹在子元素周围_Polymer_Web Component

Polymer 聚合：将父元素包裹在子元素周围

polymer

Polymer 聚合：将父元素包裹在子元素周围,polymer,web-component,Polymer,Web Component,使用聚合物很容易扩展另一个web组件。您可以使用在子模板中标记父级的阴影dom应位于的位置（）我希望扩展一个元素，但要让父元素包装子元素的特定部分。我在一些模板引擎中使用过这种设置。这可以通过html包含来完成吗家长：： <link rel="import" href="/bower_components/polymer/polymer.html"> <polymer-element name="tpl-parent" noscript> <templat

使用聚合物很容易扩展另一个web组件。您可以使用

在子模板中标记父级的阴影dom应位于的位置（）

我希望扩展一个元素，但要让父元素包装子元素的特定部分。我在一些模板引擎中使用过这种设置。这可以通过html包含来完成吗

家长：：

<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>

孩子：：

<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>


我在这里放的任何东西都应该由父项中的_部分“包装”

你不能这样声明。但我认为，如果子节点具有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>


#包装p{颜色：红色；}
x-foo的你好
聚合物({
});
我被x-foo包裹着
我没有被包裹
聚合物({
domReady:function（）{
this.$.wrapper.appendChild（this.$.foo）；
}
});

你不能这样声明。但我认为，如果子节点具有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>


#包装p{颜色：红色；}
x-foo的你好
聚合物({
});
我被x-foo包裹着
我没有被包裹
聚合物({
domReady:function（）{
this.$.wrapper.appendChild（this.$.foo）；
}
});

尽管@robdodson的答案完全正确，但感觉。。太“松”

在工作中进一步讨论这一点时，有人提到了“原则”。这使我从一个不同的（我认为更好的）角度看待这种情况

最后我总结了以下内容（还包括传递参数的示例）：

--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>


#wrapper.valid:：content p{color:green；}
#wrapper.invalid:：content p{color:red；}
x-bar将放在下面的内容标签中
聚合物({
状态：“”，
状态更改：功能（旧值、新值）{
if（['valid'，'invalid'].indexOf（newVAl）=-1）{
此.$.wrapper.setAttribute（'class'，newVal）；
}
}
});

--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>

唯一的“劣势”是你必须传递“身份”。但这感觉比在超级类中附加一个“浮动”div#wrapper更好