質問: お世話になっています。 現在BootstrapとPolymerを使用してWebサイト制作をしています。 さっそく質問なのですが、Polymerを使用して定義した独自コンポーネントに外部で 用意したScriptファイルを !画像の説明をここに入力 と読み込み、コンポーネント内の要素にScriptを適用したいのですが、どうやら 現在適用されていないようです。 試した方法としては ・polymer-elementタグの外側でScript読み込みを定義 ・templateタグの中でScript読み込みを定義 したのですが、反映されていないようです。 どなたかScriptを反映する方法をご存知の方はいらっしゃいませんでしょうか? Polymerのverは0.5.5 Bootstrapのverは3.3.4です。
回答: 動作しないコードが掲載されていないので、推測になります。 原因 == 前回の質問と同じく、ShadowDOM の仕様による現象だと考えられます。 前回 私は ShadowDOM の外側で定義された **CSS ルールが適用されない** と記述しましたが、より厳密には **CSS セレクタがマッチしない** と言うべきだったでしょう。CSS セレクタがマッチしない結果、ルールが適用されません。 さて、CSS セレクタを利用する場面は、CSS ルール定義だけではありません。 JavaScript から DOM 要素を検索する場合にも利用されます。 ``` $('#myModal').modal('show') ``` > > ※ より抜粋 > > > 例えば、この`#myModal`は、`myModal`という`id`属性を持つ DOM 要素にマッチする CSS セレクタです。 ここで、分かりやすくするために検索部分を生の DOM API で書き直してみます。 ``` var myModal = document.querySelector('#myModal'); $(myModal).modal('show'); ``` `document.querySelector`はグローバル (つまり、ShadowDOM の外側) で CSS セレクタを用いて検索を行います。` ``` ``要素の中から div 要素を取ってこられたら困る、というのが理由です。ShadowDOM 境界のお陰で``要素の中がどのように書かれているか意識する必要がなく、その内部実装が変化してもアプリケーションには影響しにくくなります。 解決方法 ==== ShadowDOM の内部を検索するためには、ShadowDOM のルート ノードとなる ShadowRoot オブジェクトの`querySelector`メソッドを利用します。 ``` Polymer({ ready: function() { var myModal = this.shadowRoot.querySelector('#myModal'); $(myModal).hoge(); // ready コールバックで .show() したら酷いので慌てて変更 } }); ``` もしくは、Polymer が用意してくれる`$`プロパティを利用します。 ``` Polymer({ ready: function() { $(this.$.myModal).hoge(); // ready コールバックで .show() したら酷いので慌てて変更 } }); ``` なお、ライブラリの` // your-component.html ... ``` こうすることで、複数のコンポーネントから import した場合でも、読み込まれるのは1度だけになります。 WebComponents を利用すると設計が大きく変わるので、WebComponents を想定していないライブラリとの併用は大変ですね。