2

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

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

4

1 回答 1

2

polymer-elements polymer-flex-layout / polymer-flex-layout.css仍在使用

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

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

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

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

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

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

于 2013-12-20T13:33:58.610 回答