Polymer - Chromeの要素ブラウザで表示される内部要素

Question

Polymerの学習を開始したばかりですが、私は自分のドキュメントで作業しています。私が正常にページ上の要素をインポートして使用することができます

<link rel="import" href="/path/to/polymer/polymer.html"> 

<dom-module id="test-element"> 
    <template> 
     <style> 
      p { 
       color: blue; 
      } 
     </style> 
     <p>Hello [[name]]!</p> 
    </template> 
    <script> 
     Polymer({ 
      is: 'test-element', 
      properties: { 
       name: String 
      } 
     }); 
    </script> 
</dom-module> 

：私は私のために働いているように見える非常に単純なHello Worldの要素を作成している

<link rel="import" href="/path/to/my/test-element.html"> 
<test-element name="World"></test-element> 

正しくブルーP「を示すこと'要素を "Hello World！"と言っています。また、要素のCSSスタイリングが、要素の外側のページの他の「p」要素に正しく出現していないことがわかります。

これまでのところとても良いです。しかし、ドキュメントでは、Webコンポーネントのメリットの1つは、内部実装の詳細がメインのDOMツリーから隠されていることです。彼らの与えられた例は、内部に他の要素を持つ 'video'要素でしたが、それらの要素を直接照会することはできません。

しかし、Chromeデベロッパーツールでは、私の 'test-element'の中のDOMツリーの 'p'要素を見ることができます。私も、私は私が行うことができるようになっていないと思ったのjQuery、でそれを照会することができます

$("test-element p") 
// Produces: [ <p class="style-scope test-element">Hello World!</p> ] 

私が何か間違ったことをやっている、または私は、ポリマーが機能する方法を誤解していますか？

Answer 1

あなたが見るものの背後にある理由はshady-domです。デフォルトでPolymerはshadow-domの代わりにshady-dom（liteバージョンwebcomponentsjs、シャドードムは存在しません）の主な3つのブラウザ（chrome、safari、firefox）をサポートしています。現在shadow-domとshadow-dompolyfill(webcomponentsjs)は非常にコストがかかります（その他の理由もあります）。 shady-domには、あなたが観察したものと他のものが含まれています。 shadowとshady dom hereについて詳しく読むことができます。

注：あなたはShow user agent shadow DOM devtool設定のオプションが、今回は違うのNodeList構造を有効にした場合、あなたはまだあなたのchrome dev-toolでshadow-domの内側の要素を見ることができます。 （つまり、Chromeを）それをサポートしていますこれらのブラウザのために

（詳細はPolymer Docsを参照してください「影」に設定するグローバルな「DOM」高分子を設定することで、存在しているとき、あなたは影DOMを有効にすることができます）：

window.Polymer = { 
    dom: 'shadow' 
};