我想知道 Polymer.dart 元素声明中的 style (...) 部分如何在内部交互,它能否从容器继承任何样式?
我正在查看 Dart Polymer 教程:
这显示了一个样式部分。该示例表明该元素将具有 LemonChiffon 背景色。当我使用 Dart 编辑器运行它时,背景与容器相同,即。
<template>
<style>
@host {
:scope {
background-color: LemonChiffon;
text-align: center;
display: inline-block;
border: solid 1px;
padding: 10px 10px 10px 10px;
}
}
</style>
<div>
<div>
{{counter}}
</div>
<div>
<button on-click="{{start}}" id="startButton">Start</button>
<button on-click="{{stop}}" id="stopButton">Stop</button>
<button on-click="{{reset}}" id="resetButton">Reset</button>
</div>
</div>
</template>
这是一个错误吗?有时人们希望元素保持其样式,如本例所示。
在其他时候我可能想要覆盖内部样式设置。是否有覆盖样式的设置?
同样,dart 对象上的方法是否可以像私有(private)数据一样访问样式?
我还没有找到style 部分的文档。我假设本节打算遵循
无论如何,我认为选择器的 Polymer 实现可以明确说明什么有效以及预期做什么。欢迎所有关于 Polymer 样式部分的见解。
谢谢。
最佳答案
您从中复制代码的图像已过时。
请使用这些页面之一作为引用如何设置自定义元素的样式:
CSS 应如下所示:
:host {
background-color: LemonChiffon;
text-align: center;
display: inline-block;
border: solid 1px;
padding: 10px 10px 10px 10px;
}
注意
Dartium(Dart 开发浏览器)通常落后几周。
最近从 ^
和 ^^
到 /shadow/
和 /shadow-deep/
的更改不起作用在 Dartium 中。
关于css - 样式部分如何与 Polymer.dart 模板一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22375725/