如何在飛鏢聚合物中設計分佈式節點

我試圖在飛鏢聚合物中設計風格的分佈式節點，但沒有運氣。我使用的例子在：如何在飛鏢聚合物中設計分佈式節點

http://www.polymer-project.org/articles/styling-elements.html#style-distributed

爲出發點。但是，一旦移植到Dart，我甚至無法完成這項工作。這裏是我的代碼：

<polymer-element name="test-element"> 
    <template> 
    <style> 
     content[select="p"]::content * { /* anything distributed here */ 
     font-weight: bold; 
     } 
     /* @polyfill p:first-child */ 
     ::content p:first-child { 
     color: red; 
     } 
     /* @polyfill footer > p */ 
     ::content footer > p { 
     color: green; 
     } 
     /* @polyfill :host > p */ 
     ::content > p { /* scope relative selector */ 
     color: blue; 
     } 
    </style> 
    <content select="p"></content> 
    <content></content> 
    </template> 
    <script type="application/dart" src="testelement.dart"></script> 
</polymer-element>

。

<!DOCTYPE html> 

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Sample app</title> 
    <link rel="stylesheet" href="testpolymer.css"> 

    <!-- import the test-element --> 
    <link rel="import" href="testelement.html"> 
    <script type="application/dart">export 'package:polymer/init.dart';</script> 
    <script src="packages/browser/dart.js"></script> 
    </head> 
    <body> 
    <h1>TestPolymer</h1> 

    <p>Hello world from Dart!</p> 

    <test-element> 
     <p>I'm red and bold</p> 
     <p>I'm blue and bold</p> 
     <footer> 
      <p>I'm also red</p> 
      <p>I'm green</p> 
      <span>I'm black</span> 
     </footer> 
    </test-element> 

    </body> 
</html>

輸出沒有應用樣式，只是一切的黑色文本。任何想法我做錯了什麼？

來源

2013-12-20 mark

聚合物元素polymer-flex-layout/polymer-flex-layout.css仍然使用

::-webkit-distributed(p) { 
    color: red; 
}

這也適用於我最近的版本Dartium的。我不知道新選擇器何時生效。

其他聚合物的元素，使利用這一選擇，但最近切換到::content

聚合物的UI場
聚合物的UI菜單項
聚合物-UI-nav-箭頭
聚合物-UI-頁
聚合物-UI-側邊欄
聚合物-UI-工具欄

您可以瀏覽歷史記錄以查找以前的webkit分佈式選擇器示例。

我猜他們使用的鉻可能比Dartium稍早。

來源

2013-12-20 13:33:58

如何在飛鏢聚合物中設計分佈式節點

回答

相關問題