我正在尝试设置自定义元素标签的样式，但似乎无法从元素<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 中工作。
我认为你想要的是@hostcss 选择器。
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-host
正如另一个答案中提到的，要对影子 DOM 的主机进行样式设置，请使用@host选择器。在自定义元素的情况下，自定义元素的宿主就是它自己。
下面是一个示例，说明如何从自定义元素的<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;
}
}
因为这个特定的自定义元素不扩展任何元素，所以它不默认为块。
这是样式化后的样子：
