动态附加的孩子忽略了CSS

我在这里问了这个问题，以及在聚合物的github上，这些答案对我不起作用。

plunker：http：//plnkr.co/edit/1tghxtsflxennq3hcb0p?p=preview

index.html的身体具有应用。

<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 ='foo'，它应该呈现红色背景，但不是。

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

page base在" WebComponents Ready"之后将自己添加到应用程序元素中。

<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的样式，即使在程序上添加页面时也可以工作。

有人知道发生了什么事吗？谢谢。

ah，弄清楚了。它应该是页面 - 添加到应用程序元素而不是页面基础上。

如果您想将聚合物滥用到'继承'中，就像我一样，这是一个解决方案http://plnkr.co/edit/pi4xpdsq6rfcoyq3g3g3sm?p=preview。

请注意页面词的这一行：

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

相关内容

最新更新

热门标签：