如何在元素中设置自定义元素标签的样式？
我正在尝试设置自定义元素标记的样式,并且似乎无法在元素的<style>标记内执行此操作,或者至少我不知道要使用哪个选择器.我已经尝试过自定义元素的标签名称template,但是都没有工作.
<polymer-element name="my-test" constructor="MyTest">
<template>
<style>
my-test {
border: solid 1px #888; /* doesn't work */
}
.title {
color: blue; /* works */
}
</style>
<div class="title">{{ title }}</div>
</template>
我正在使用polymer.dart,所以它的实现可能会有一些滞后,但我想知道它应该如何在polymer.js中工作.
如另一个答案所述,要设置shadow DOM的主机样式,请使用@hostselector.对于自定义元素,自定义元素的主机本身.
下面是一个如何在自定义元素的<style>标记内设置主机元素或自定义元素本身样式的示例.
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script src="packages/polymer/boot.js"></script>
</head>
<body>
<polymer-element name="my-element">
<template>
<style>
@host {
my-element {
display: block;
border: 1px solid black;
}
}
p {
color: red;
}
#message {
color: pink;
}
.important {
color: green;
}
</style>
<p>Inside element, should be red</p>
<div id="message">
The message should be pink
</div>
<div class="important">
Important is green
</div>
<div>
<content></content>
</div>
</template>
<script type="application/dart" src="index.dart"></script>
</polymer-element>
<p>outside of element, should be black</p>
<div id="message">
The outside message should be black
</div>
<div class="important">
Outside important is black
</div>
<my-element>Hello from content</my-element>
<!-- If the script is just an empty main, it's OK to include inline. -->
<!-- Otherwise, put the app into a separate .dart file. -->
<script type="application/dart">main() {}</script>
</body>
</html>
注意@host样式中的块:
@host {
my-element {
display: block;
border: 1px solid black;
}
}
因为此特定自定义元素不扩展任何元素,所以它不会默认为块.
以下是样式时的样子:
- @host {:scope {...}}比使用选择器的标记名称更具通用性.它也将转变为:主持更自然.http://www.polymer-project.org/articles/styling-elements.html#element-defined-styles (2认同)
| 归档时间： |
|
| 查看次数： |
1566 次 |
| 最近记录： |