由于某种原因，Polymer 自定义元素的内部 (:host) 样式未加载。我正在使用来自 pub ( https://pub.dartlang.org/packages/fancy_button ) 的实际 fancy_button 组件。
hello_world.html
<head>
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/fancy_button/fancy_button.html">
<link rel="import" href="../lib/components/first-component/first-component.html">
</head>
<body>
<button is="fancy-button">Wooot!</button>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
花式按钮.html:
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<polymer-element name="fancy-button" extends="button">
<template>
<style>
:host {
background: linear-gradient(to bottom, #ff5db1 0%,#ef017c 100%);
box-shadow: 10px 10px 5px #888888;
border-radius: 5px;
font-size: 2em;
border: 0;
font-family: 'Tangerine', cursive;
padding: 30px;
}
:host(:hover) {
cursor: pointer;
}
:host(:active) {
font-size: 3em;
}
</style>
<content></content>
</template>
<script type="application/dart" src="fancy_button.dart"></script>
</polymer-element>
最佳答案
我试过你的代码，它对我有用(我得到一个粉红色的“Woot”大按钮，点击时会增加它的大小)
当我注释掉这一行时
<!--<link rel="import" href="../lib/components/first-component/first-component.html">-->
我还必须添加
transformers:
- polymer:
entry_points:
- web/hello_world.html
到 pubspec.yaml(用于开发 channel Dart 版本 1.5.0-edge)
这可能是它在这里工作但不适合你的原因
但我在 CSS 中看不到 Dart 1.4 不支持的任何内容。
我还保留了聚合物依赖性(0.10.1+1)
关于dart - 为什么我的 Polymer 自定义元素中的样式无法识别？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24277406/