外部CSS影響（「流血」進入）影子DOM與聚合物

我必須錯過一些東西，但我無法弄清楚什麼。我有聚合物實現簡單的自定義元素：外部CSS影響（「流血」進入）影子DOM與聚合物

<polymer-element name="test-elem"> 

    <template> 
     <content></content> 
     <div id="container"> 
      <div class="deepinside"> 
      TECK ... CHEST 
      </div> 
     </div> 
    </template> 

    <script> 
     Polymer('test-elem', { 
      applyAuthorStyles: false, 
     }); 
    </script> 

</polymer-element>

然後我在一個簡單的頁面使用它：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 

    <script src="libs/polymer.min.js"></script> 

    <link rel="import" href="test-elem.html"> 

    <style> 
    .deepinside { color: red; } 
    </style> 

</head> 
<body> 
    <test-elem>Hi</test-elem> 
</body> 
</html>

元素的內部div（與class="deepinside"）以紅色顯示的內容。如果我理解正確，則不應該發生（請參閱this doc）。請注意，我在元素的構造函數中明確聲明瞭applyAuthorStyles: false（它不應該是必需的，因爲它是默認行爲）。我不明白爲什麼外部CSS會影響陰影DOM中的元素。我甚至試過在元素的定義中明確指定shadowdom屬性，但結果是一樣的。

我錯過了什麼？

FWIW，我在OS X 10.7.5上運行Chrome版本31.0.1650.57。

來源

2013-11-23 jorgeh

這是一個known limitation of the Shadow DOM polyfill。它在防止組件樣式滲出方面做得相當不錯，但是其他方法並沒有這樣做。

Here's您的使用案例的一個codepen。它適用於Chrome 33.0.1717.0 canary（聚合物不填充Shadow DOM），但不適用於31.0.1650.57。

來源

2013-11-24 07:01:02 CletusW

外部CSS影響（「流血」進入）影子DOM與聚合物

回答

相關問題