我正在尝试在 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>
输出没有应用样式，所有内容都只是黑色文本。你知道我做错了什么吗？
最佳答案
聚合物元件polymer-flex-layout / polymer-flex-layout.css仍然使用
::-webkit-distributed(p) {
color: red;
}
这也适用于我最新版本的 Dartium。 我不知道新的选择器何时生效。
使用此选择器但最近已切换到 ::content 的其他聚合物元素
- 聚合物 UI 字段
- 聚合物用户界面菜单项
- 聚合物-ui-nav-arrow
- 聚合物用户界面页面
- 聚合物 ui 侧边栏
- 聚合物用户界面工具栏
您可以浏览历史记录以查找以前的 webkit 分布式选择器示例。
我猜他们使用 Chromium，它可能比 Dartium 稍微领先一点。
关于dart - 如何在 Dart Polymer 中设置分布式节点的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20704066/