Css 如何仅将自定义样式应用于特定图元？

我正在开发一个可主题的聚合物网络组件。根据文档，我正在执行以下操作：

  <link rel="import" href="themes/my-element-theme.html">
  <style is="custom-style" include="my-element-theme"></style>

但是，这使得很难将自定义样式应用于整个文档

---

有没有一种方法可以更有选择性地将自定义样式应用于元素，比如使用CSS选择器？什么是最佳实践？

您肯定可以使用选择器有选择地将样式应用于可主题元素

最好使用自定义属性和mixin，并将其值设置为目标元素。下面是一个例子：

.container1我的元素{
--我的元素跨度：{
颜色：红色；
}
}
.container2我的元素{
--我的元素跨度：{
颜色：蓝色；
}
}
你好，瑞德
你好，蓝
：host{display:block；}
：主机跨度{
@应用（--我的元素范围）；
}
聚合物({
是：'我的元素'
});

:root custom-element.my-element-theme {
  font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
}