Polymer 2 从外部样式表为元素的子节点设置样式

Question

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

此 <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>

我想通过与自定义元素 attached/used.

我试过：

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

但是不行，进度div一直是红色。似乎没有办法从元素本身外部设置阴影 dom 的样式，我试过 my-course::content div#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

Polymer 2 从外部样式表为元素的子节点设置样式

Polymer 2 styling an element's child node from an outside stylesheet

css

web-component

polymer

polymer-2.x