2016-09-17 9 views
2

私は、一般的にうまく動作する<style include="style-name"></style>を使用するスタイルを使用しています。ポリマー:動的コンテンツを読み込む際にスタイルをリロードする

しかし、JavaScriptを使用してコンテンツを動的に読み込んで変更する要素が1つあります。ある時点で、ある外部ソースから新しいコンテンツをロードし、それに応じてコンテンツを更新します。これらの新しいコンテンツには、style-nameというスタイルが適用されていません。

Polymerにスタイルを再評価させ、新しいコンテンツに適用する方法を教えてください。


私はMeteor + Synthesisを使用しています。

+0

あなたは 'Polymer.updateStyles()'や 'this.updateStyles()'を呼び出すしてみました:

Polymer.updateStyles()は、あなたがこのようなローカルDOM CSSの変数を変更するときに働いていますか? 多くの情報については[こちら](http://stackoverflow.com/questions/30854101/change-style-programmatically)を参照してください。 –

答えて

1

このようなスタイルのスコープあなたはポリマーimportHrefを(使用する必要があります)とし、DOM()関数を保つために:

// ... 
let importSource = Polymer.Base.importHref('path/to/external-source', 
// Import is done, use the body of that 
event => { 
    // #container is my element which should have the content 
    // but you can change to any element what you want 
    // or use just the this.root 
    Polymer.dom(this.$.container).innerHTML = importSource.import.body; 
}, 
// Handle errors 
event => console.error(event)); 
// ... 

シャドウDOMであなたは日陰のDOMを使用している場合、ポリマーは、スタイルのスコープを適用します。この方法は、それはデフォルトで動作するはずですが、私はテストしませんでしたので、そのために組み込まれたPolymerを使う方が良いでしょう。 this.customStyle['--my-toolbar-color'] = 'blue';

+0

重要な部分は、 'Polymer.dom(element).innerHTML =" ... "; 'element.innerHTML'ではなく' element.innerHTML'です。ありがとう:) – Yorrd

+0

@ Yorrd Imは、カスタム要素を含んでいるテンプレートファイルをインポートしました。なぜ私がimportHrefを使用したのか:)あなたは大歓迎です! – adaliszk

関連する問題