Question

我创建了一个自定义的Polymer Dart元素，它扩展了另一个自定义元素。 parent元素具有定义的样式，其中包含：host选择器。将父元素添加到DOM时，将按预期应用样式。

扩展父元素并将子元素添加到DOM时，并不总是应用为父元素定义的样式。在Dartium v36.0.1985.97（280598）或Chrome v35.0.1916.153中测试以下代码时，将显示两个元素并应用正确的样式。在Firefox 28.0和Chrome v34.0.1847.116 Ubuntu 14.04光环（260972）中测试时，只有父元素具有应用的样式。

pubspec.yaml：

name: myapp
dependencies:
  polymer: ">=0.12.0-dev <0.12.0"
transformers:
- polymer:
    entry_points: web/index.html

的index.html：

<!DOCTYPE html>

<html>
<head>
    <title>index</title>
    <!-- <script src="packages/web_components/platform.js"></script>
         not necessary anymore with Polymer >= 0.14.0 -->
    <script src="packages/web_components/dart_support.js"></script>
</head>

<body>

<link rel="import" href="packages/polymer/polymer.html">

<!-- parent element -->
<polymer-element name="my-parent">
    <template>
        <style>
        :host {
            background:red;
        }
        </style>
        <content></content>
    </template>
</polymer-element>
<script type="application/dart" src="my-child.dart"></script>

<!-- child element -->
<polymer-element name="my-child" extends="my-parent">
</polymer-element>
<script type="application/dart" src="my-parent.dart"></script>

<p><my-parent>RED? (parent elment)</my-parent>
<p><my-child>RED? (child element)</my-child>

<script type="application/dart">export 'package:polymer/init.dart';</script>

</body>
</html>

Dartium v36.0.1985.97（280598）和Chrome v35.0.1916.153的输出：

（发布图片需要10点声望，所以请查看结果：http://s30.postimg.org/8j3x3l2m9/Dartium.png）

Firefox 28.0和Chrome v34.0.1847.116中的输出Ubuntu 14.04光环（260972）

（结果：http://s1.postimg.org/f210lwhj3/Firefox.png）

我倾向于将此归类为错误，但我会感谢来自SO社区的反馈，以了解我的实施是否有任何问题。是否还需要其他步骤来确保在创建子元素时还应用了父元素中定义的样式？

自定义父元素的样式未应用于子元素

0 个答案: