Question

我通过创建一个简单的自定义元素（ui-button）来玩Polymer 1.0。

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

<dom-module id="ui-button">
    <link rel="import" type="css" href="ui-button.css">
    <template>
        <button class="ui button">
            <template is="dom-if" if="{{icon}}"><i class="icon">1</i></template>
            <template is="dom-if" if="{{label}}">{{label}}</template>
        </button>
    </template>
</dom-module>

<script src="ui-button.js"></script>

在Chrome中一切正常，但在Firefox中按钮没有样式。我的猜测是问题是外部样式表，因为当我把CSS内联（样式标签）时......它可以工作。

这是Polymer 1.0中的错误吗？我真的想使用外部样式表...

Answer 1

这适用于Chrome和Firefox。这是我的index.html文件：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/stylesheet.css">

    <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="/app/general/your-element.html">
  </head>

<body>
    <your-element></your-element>
</body>

</html>

在元素内部，我使用css类/ id引用就像在任何常规html标记上一样。因此，your-element内部看起来像这样：

<link rel="import" href="/bower_components/polymer/polymer.html">    
<dom-module id="your-element">

<template>
<span class="some_class_style">Hey, I'm stylish!</span>
</template>

<script>
Polymer({
  is: 'your-element',
  ...
});
</script>

</dom-module>

并且，它由您为some_class_style定义的任何内容设置。请记住，我只制作了一层深度的元素（即没有子元素），但似乎工作正常。

Firefox中的Polymer 1.0样式

1 个答案: