Firefox 中的 Polymer 1.0 样式答案

【问题标题】：Polymer 1.0 styling in FirefoxFirefox 中的 Polymer 1.0 样式
【发布时间】：2015-06-01 20:48:55
【问题描述】：

我正在通过创建一个简单的自定义元素（ui 按钮）来使用 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 中的错误吗？我真的很想使用外部样式表...

【问题讨论】：

polymer-project.org/1.0/docs/devguide/styling.html 说它目前是一个“实验性功能”，所以我怀疑这是一个错误。或者，我会尝试将您的 CSS 放在带有 <style> 标签的单独文件中，并将其作为常规 HTML 导入导入，而不是 type="css"。

标签： css firefox polymer

【解决方案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 定义的任何内容设置。请记住，我只制作了一层深度的元素（即没有子元素），但它似乎工作正常。

【讨论】：

是的，但我希望将样式表包含在 Web 组件中。不在 index.html 中