Firefox中的Polymer 1.0样式-Java 学习之路

我正在使用Polymer 1.0创建一个简单的自定义元素（ui-button） .

<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中的错误吗？我真的想使用外部样式表...

1 回答

这对我和Chrome都适用 . 这是我的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 定义的任何样式设置 . 请记住，我只创建了一个深层次的元素（即没有子元素），但它似乎工作正常 .

回复于 2024-05-10T20:01:38+08:00

Firefox中的Polymer 1.0样式

1 回答

相关问题