聚合物 - Chrome瀏覽器元素瀏覽器中可見的內部元素

我剛開始學習Polymer，並且一直在研究他們的文檔。我創建了似乎是工作對我來說是非常簡單的Hello World元素：聚合物 - Chrome瀏覽器元素瀏覽器中可見的內部元素

<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>

我可以導入和使用元素成功地在頁面上：

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

那正確地顯示一個藍色「P '元素說「Hello World！」，並且我還可以看到元素上的CSS樣式正確地不滲入元素外部頁面上的其他'p'元素。

到目前爲止這麼好。然而，在我一直在閱讀的文檔中，Web組件的好處之一是它的內部實現細節在主DOM樹中是隱藏的。他們給出的例子是'video'元素，裏面有其他元素，但是你不能直接查詢這些元素。但是，在Chrome開發人員工具中，我能夠在'test-element'內的DOM樹中看到'p'元素。我甚至可以用jQuery查詢它，我認爲我不應該能夠做到：

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

上午我做錯了什麼，或者我有誤解聚合物的工作方式？

來源

2016-07-15 dsw88

您可以在啓用'shadow-dom'後嘗試這個相同的測試。 [這裏]（https://www.polymer-project.org/1.0/docs/devguide/settings）是怎麼做到的。 – a1626

太棒了，我無法在支持陰影DOM的瀏覽器上查詢內部元素。如果你可以發表你的評論作爲答案，我會upvote並接受它。 – dsw88

你看到的原因是shady-dom。聚合物默認實現shady-dom而不是shadow-dom（也就是爲什麼我們使用lite版本的webcomponentsjs，沒有陰影DOM存在的原因）作爲出3級主要的瀏覽器（Chrome瀏覽器，Safari和Firefox）目前只對Chrome的支持和shadow-dom和使用shadow-dom從polyfill(webcomponentsjs)是非常昂貴（和其他一些原因）。 shady-dom有其自身的缺點，其中包括你觀察到的和其他的。您可以閱讀更多關於shadow和shady dom here。

注：你仍然可以看到shadow-dom的內部元件在chrome dev-tool如果啓用devtool設置Show user agent shadow DOM選項，但這次不同的節點列表結構。

對於那些支持它（即瀏覽器）的瀏覽器，則可以啓用陰影DOM時存在通過設定全球「DOM」聚合物設定爲「影子」（見Polymer Docs瞭解更多詳情）：

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

來源

2016-07-15 18:58:45 a1626

聚合物 - Chrome瀏覽器元素瀏覽器中可見的內部元素

回答

相關問題