Question

我在这里问过这个问题，以及在Polymer的GitHub上，没有一个答案适合我。

Plunker：http://plnkr.co/edit/1tGHXTsFlXeNnq3hCb0P?p=preview

Index.html在主体中有app-element。

<head>
  <script src="https://polygit2.appspot.com/components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="app.html">
  <link rel="import" href="bootstrap.html">
</head>

<body>
  <app-element></app-element>
</body>

</html>

app.html：

<link rel="import" href="https://polygit2.appspot.com/components/polymer/polymer.html">
<link rel="import" href="page-one.html">
<dom-module id="app-element">

  <template>
    <style>

    </style>
    <div id="container">

    </div>
  </template>

  <script>
    Polymer({
      is: "app-element",
      ready: function() {
        window.app = this;
      }
    });
  </script>

</dom-module>

Index.html链接bootstrap.html，其中声明了第一页。

<link rel="import" href="page-one.html">
<page-one></page-one>

page-one具有基于页面的元素，其中添加了两个内容项。第二项有class =＆＃39; foo＆＃39;它应该呈现红色背景，但它没有。

<link rel="import" href="https://polygit2.appspot.com/components/polymer/polymer.html">
<link rel="import" href="page-base.html">
<dom-module id="page-one">

  <template>
    <!-- scoped CSS for this element -->
    <style>
      .foo {
        background-color: red;
      }
    </style>
    <div>
      <page-base>
        <div>One</div>
        <div class="foo">Two</div>
      </page-base>
    </div>
  </template>

  <script>
    Polymer({
      is: "page-one",
    });
  </script>

</dom-module>

在＆＃39; WebComponentsReady＆＃39;之后，

页面库将自己添加到app-element。

<link rel="import" href="https://polygit2.appspot.com/components/polymer/polymer.html">
<dom-module id="page-base">

  <template>
    <!-- scoped CSS for this element -->
    <style>

    </style>
    <div>
      <content></content>
    </div>
  </template>

  <script>
    Polymer({
          is: "page-base",
          created: function() {
            var self = this;
            window.addEventListener('WebComponentsReady', function() {
                Polymer.dom(window.app.$.container).appendChild(self);
                Polymer.dom.flush();
              });
            }
          });
  </script>

</dom-module>

当第一页以声明方式添加到app-element时，一切正常。

另外，如果我将.foo {}移动到app-element的样式，即使以编程方式添加页面也能正常工作。

有谁知道发生了什么？感谢。

Answer 1

啊，想通了。应该是第一页将自己添加到app-element而不是页面基础。

Answer 2

如果你想将聚合物滥用到“继承”中，就像我一样，这里有一个解决方案http://plnkr.co/edit/PI4xPDsQ6RfCOYq3g3sM?p=preview。

请注意页面中的这一行：

Polymer.dom(window.app.$.container).appendChild(self.dataHost);

动态附加的子项已忽略CSS

2 个答案: