Полимер 2 Укладка дочернего узла элемента из внешней таблицы стилей

Предположим, что у меня есть пользовательский веб-элемент под названием <my-course> со своим собственным стилем, определенным в теге <style> внутри определения, и я вообще не хочу изменять файл этого элемента, поскольку это внешняя зависимость моего проекта.

Этот элемент <my-course> имеет дочерний элемент <div>, определенный в теге <template>.

Пример: 

<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 зеленым с " background: green; "(по умолчанию он красный) через внешнюю таблицу стилей, которая загружается на той же странице, что и пользовательский элемент прикрепляется/используется.

Я пытался сделать: 

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

Но это не работает, прогресс div продолжает быть красным. Кажется, нет никакого способа стилизовать shadow dom вне самого элемента, я попробовал my-course:: content div#progress, и не имеет результата (/deep/ и ::shadow являются устаревшими) я ранее достиг этого с помощью ::shadow.

Кто-нибудь может помочь? Спасибо

1 2
polymer css

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

1