聚合物 2 从外部样式表设置元素的子节点样式

Question

假设我有一个名为<my-course>的自定义 Web 元素，它在定义内的<style>标签中定义了自己的样式，我根本不想更改此元素的文件，因为它是我的项目的外部依赖项。

此<my-course>元素具有在<template>标记中定义的<div>子元素。

例：

<dom-module id="my-course">
<template>
<style>

::host {
padding: 5px;
background: rgba(0,0,0,.2);
}

div#progress {
height: 20px;
width: 100%;
background: red;
}        
</style>
<h1>This is my custom course element</h1>
<div id="progress"></div>
</template>

<script>
class MyCourse extends Polymer.Element {
static get is() {
return 'my-course';
}
}

window.customElements.define(MyCourse.is, MyCourse);
</script>
</dom-module>

我想用"背景：绿色"使div#progress绿色;(默认情况下为红色)通过外部样式表加载到与附加/使用自定义元素相同的页面中。

我尝试做：

my-course div#progress {
background: green;
}

但它不起作用，进度div 一直为红色。似乎没有办法从元素本身之外设置阴影 dom 的样式，我已经尝试了 my-course：：contentdiv#progress，但没有结果(/deep/和 ：：shadow 已被弃用)我以前使用 ：：shadow 实现了这一点。

有人可以帮忙吗？谢谢

Answer 1

你应该使用 CSS 变量，例如：

::host {
--progress-background: red;
padding: 5px;
background: rgba(0,0,0,.2);
}
div#progress {
height: 20px;
width: 100%;
background: var(--progress-background);
}

并覆盖它：

my-course {
--progress-background: green;
}

更多信息在这里： https://www.polymer-project.org/2.0/start/first-element/step-5