1
私はこの質問とPolymerのGitHubについて尋ねましたが、私の答えはありません。動的に追加された子がCSSを無視しました
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とは、ページ-1が宣言されbootstrap.htmlをリンクします。
<link rel="import" href="page-one.html">
<page-one></page-one>
page-oneには2つのコンテンツ項目が追加されています。 2番目のアイテムは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は、 'WebComponentsReady'の後に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>
page-oneが宣言的にapp-elementに追加されると、すべて正常に動作します。
また、.foo {}をapp-elementのスタイルに移動すると、プログラムでページが追加されても機能します。
何が起こっているのか知っていますか？おかげさまで