動作しないコードが掲載されていないので、推測になります。
原因
前回の質問と同じく、ShadowDOM の仕様による現象だと考えられます。
前回 私は ShadowDOM の外側で定義された CSS ルールが適用されない と記述しましたが、より厳密には CSS セレクタがマッチしない と言うべきだったでしょう。CSS セレクタがマッチしない結果、ルールが適用されません。
さて、CSS セレクタを利用する場面は、CSS ルール定義だけではありません。
JavaScript から DOM 要素を検索する場合にも利用されます。
$('#myModal').modal('show')
※ http://getbootstrap.com/javascript/ より抜粋
例えば、この#myModal
は、myModal
というid
属性を持つ DOM 要素にマッチする CSS セレクタです。
ここで、分かりやすくするために検索部分を生の DOM API で書き直してみます。
var myModal = document.querySelector('#myModal');
$(myModal).modal('show');
document.querySelector
はグローバル (つまり、ShadowDOM の外側) で CSS セレクタを用いて検索を行います。<script>
タグが ShadowDOM の中に書かれていても、document
オブジェクトは ShadowDOM の外側です。
そして CSS セレクタは ShadowDOM 境界を超えないので、document.querySelector('#myModal')
では ShadowDOM の中にある#myModel
要素にはヒットしません。
例えば、次のような状況で
<thirdparty-library-button>ライブラリのボタン</thirdparty-library-button>
<div>てきすと</div>
<script>
var div = document.querySelector('div');
</script>
<thirdparty-library-button>
要素の中から div 要素を取ってこられたら困る、というのが理由です。ShadowDOM 境界のお陰で<thirdparty-library-button>
要素の中がどのように書かれているか意識する必要がなく、その内部実装が変化してもアプリケーションには影響しにくくなります。
解決方法
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() したら酷いので慌てて変更
}
});
なお、ライブラリの<script>
は1度だけ読み込むべきなので、本体の HTML 側で読み込むか、専用の HTML ファイルを作って import しましょう。
// lib/bootstrap.html
<script src="bootstrap.js"></script>
// your-component.html
<link rel="import" href="lib/bootstrap.html">
<polymer-element name="your-component">
...
</polymer-element>
こうすることで、複数のコンポーネントから import した場合でも、読み込まれるのは1度だけになります。
WebComponents を利用すると設計が大きく変わるので、WebComponents を想定していないライブラリとの併用は大変ですね。