2

お世話になっています。
現在BootstrapとPolymerを使用してWebサイト制作をしています。

さっそく質問なのですが、Polymerを使用して定義した独自コンポーネントに外部で
用意したScriptファイルを
画像の説明をここに入力
と読み込み、コンポーネント内の要素にScriptを適用したいのですが、どうやら
現在適用されていないようです。
試した方法としては
・polymer-elementタグの外側でScript読み込みを定義
・templateタグの中でScript読み込みを定義
したのですが、反映されていないようです。

どなたかScriptを反映する方法をご存知の方はいらっしゃいませんでしょうか?
Polymerのverは0.5.5
Bootstrapのverは3.3.4です。

1 件の回答 1

3

動作しないコードが掲載されていないので、推測になります。

原因

前回の質問と同じく、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 を想定していないライブラリとの併用は大変ですね。

5
  • さっそくのご回答ありがとうございます。 前回同様、とてもわかりやすい解説を頂き理解する事ができました。 お答え頂かなくても構わないのですが、mysticatea様はどのようにPolymerの知識をつけられたのでしょうか?
    – chonbo
    Commented 2015年5月15日 2:28
  • 再度のコメント申し訳ありません。 ShadowDOMの仕様によりCSSセレクタがマッチしないのですから Script自体は読み込まれても要素が見つからないとの事ですね。 むしろ、Web Componentsの概念上、外部からCSSセレクタがマッチ するのはマズイと理解しました。 例えばですが、外部のScriptをどうしても適用させたい場合はPolymerのScriptタグにそのScriptをshadowRootに書き換えてCSSを参照するしか方法がないように思えるのですがいかがでしょうか?
    – chonbo
    Commented 2015年5月15日 2:57
  • 勉強方法は、ほぼ公式サイトのリソースのみですね。あとW3Cの仕様を読んでいます。 polymer-project.org/0.5/docs/polymer/polymer.html いくつかバグを直してパッチを投げたりしているので、いちおうコントリビューターです :) > 外部のScriptをどうしても適用させたい場合 実はその辺りをぼかして回答していました。というのも、ShadowDOM の仕様がまだ動いていて、その場合の対処が変わりそうだったからです... CSS Scoping の仕様に ShadowDOM 境界を超えるための方法が定義されています。仕様策定者たちの間では Shadow Piercing Combinators と呼ばれているようです。 my-component::shadow div と記述すると、my-component の ShadowDOM 内の最初のdivにマッチします。これは1段階だけ潜るので、ShadowDOM がネストしているとマッチしません。 html /deep/ div のように記述する (最新の仕様では >>> に変更されている) と、すべての ShadowDOM 境界(ネスト含む)を超えることができます。 ただ、
    – mysticatea
    Commented 2015年5月15日 4:08
  • コメントは改行が消えてしまうのか;; groups.google.com/a/chromium.org/forum/#!topic/blink-dev/… で言及されているように、Shadow Piercing Combinators は削除されてしまう様子があります。
    – mysticatea
    Commented 2015年5月15日 4:10
  • コメント頂きありがとうございます。コントリビューターでしたか。 恐れ入ります。 たくさんのリンク先を教えて頂き、ありがとうございます。 ShadowDOMの仕様がまだpendingなのですね。 CSS Scopingとの仕様もしっかり熟読してみようと思います。 ただ削除されてしまう可能性も捨てきれないので注意ですね。 大変参考になりました。 本当にありがとうございました。
    – chonbo
    Commented 2015年5月15日 7:26

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。