gpt4 book ai didi

css - Firefox 中的 Polymer 1.0 样式

转载 作者:行者123 更新时间:2023-11-28 07:48:19 25 4
gpt4 key购买 nike

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

最佳答案

这对我在 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 class/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 定义的任何样式决定。请记住,我只制作了一层深的元素(即没有子元素),但它似乎工作正常。

关于css - Firefox 中的 Polymer 1.0 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30583024/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com