我正在迈出使用 Polymer 的第一步,但我一直停留在自定义 CSS 属性上。
在 my-item
元素中,我正在检查 --my-item-color
变量并将 red
指定为默认值:
<dom-module id="my-item">
<template>
<style>
:host {
display: inline-block;
padding: 5px;
}
.my-div {
background-color: var(--my-item-color, red);
display: block;
}
</style>
<div class="my-div">
<content></content>
</div>
</template>
<script>
Polymer({ is: "my-item" });
</script>
</dom-module>
这些元素位于以下容器元素中,但不知何故所有 my-item
都保持红色。
<dom-module id="my-container">
<template>
<style>
:host {
--my-item-color: blue;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
</style>
<content></content>
</template>
<script>
Polymer({ is: "my-container" });
</script>
</dom-module>
plunkr:http://plnkr.co/edit/LovSp4VRAGpLadcr87Wz
谁能告诉我我做错了什么?
最佳答案
你可以使用 native CSS properties from Polymer 1.6.0允许您当前的代码工作。确保在导入 polymer.html
之前通过设置 Polymer
对象的 useNativeCSSProperties
属性来启用它:
<script>
Polymer = {
lazyRegister: true,
useNativeCSSProperties: true
};
</script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../x-element.html">
关于css - 为什么我的 Polymer 自定义 CSS 属性不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38590722/