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

Question

Let's say that I have a custom web element called <my-course> with its own style defined in the <style> tag inside the definition and I do not want to alter this element's file at all as it's an external dependency of my project.

This <my-course> element has a <div> child defined in the <template> tag.

Example:

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

I want to make the div#progress green with "background: green;" (it's red by default) via an external stylesheet that is loaded in the same page as the custom element is attached/used.

I tried to do:

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

But it does not work, the progress div keeps being red. There seems there is no way to style the shadow dom from outside the element itself, I've tried my-course::content div#progress, and has no result (/deep/ and ::shadow are deprecated) I previously achieved this using ::shadow.

Anyone can help? Thanks

Answer 1

You should use CSS variables, such as:

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

div#progress {
    height: 20px;
    width: 100%;
    background: var(--progress-background);
}

And to overrride it:

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

More info here: https://www.polymer-project.org/2.0/start/first-element/step-5