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

【问题标题】：How to style distributed nodes in Dart Polymer如何在 Dart Polymer 中设置分布式节点的样式
【发布时间】：2013-12-20 12:53:48
【问题描述】：

我正在尝试在 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>

输出没有应用任何样式，只是所有内容的黑色文本。任何想法我做错了什么？

【问题讨论】：

标签： dart dart-polymer shadow-dom

【解决方案1】：

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

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

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

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

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

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

我猜他们使用的 Chromium 可能比 Dartium 稍早。

【讨论】：