Question

由于某种原因，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>

fancy_button.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>

Answer 1

我尝试了你的代码，它适用于我（我得到一个粉红色的'Woot'按钮，点击后会增加它的大小）

当我注释掉这一行

<!--<link rel="import" href="../lib/components/first-component/first-component.html">-->

我还必须添加

transformers:
- polymer:
    entry_points:
    - web/hello_world.html

到pubspec.yaml（对于dev通道Dart版本1.5.0-edge）

这可能是它在这里工作但不适合你的原因但我在CSS中看不到Dart 1.4中尚未支持的任何内容。

我还保持聚合物依赖性（0.10.1 + 1）

Answer 2

我从开发频道（http://storage.googleapis.com/dart-archive/channels/dev/release/latest/dartium/dartium-macos-ia32-release.zip）升级到Dartium并且它有效。因此，在Dartium的早期版本中，Polymer Web组件中的样式似乎不起作用 - 要么像Günter建议的那样获得Dev Channel版本，要么pub build看到它在常规Chrome中工作。

为什么我的Polymer自定义元素中的样式不被识别？

2 个答案: