DartPolymerで分散ノードのスタイルを設定しようとしていますが運がありません。私は次の例を使用しています：
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
履歴を参照して、以前のWebkit配布セレクターの例を見つけることができます。
彼らはDartiumより少し進んでいるかもしれないChromiumを使っていると思います。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加