如何在Dart Polymer中设置分布式节点的样式

我正在尝试在Dart Polymer中设计分布式节点，但没有运气。我在以下位置使用示例：

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>

输出没有应用样式，只是所有内容的黑色文本。知道我做错了什么吗？

聚合物元素聚合物柔性布局/聚合物柔性布局.css仍然使用

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

这也适用于我最近版本的 Dartium。我不知道新的选择器何时生效。

其他使用该选择器但最近已切换到::content的聚合物元件

聚合物-用户界面场
聚合物-用户界面-菜单项
聚合物-UI-导航-箭头
聚合物-用户界面页面
聚合物-用户界面侧边栏
聚合物用户界面工具栏

您可以浏览历史记录以查找以前的 webkit 分发的选择器示例。

我猜他们使用的铬可能比Dartium领先一点。

相关内容

最新更新

热门标签：