Polymer - Are distributed nodes styled and distributed?

advertisements

Say I have two custom elements, defined as extensions of the Polymer Element:

  • c-el1
  • c-el2

templated like so:

c-el1

<dom-module id="c-el1">
    <template>
        <style>
            p{
               color:red;
             }
        </style>
        <c-el2>
            <p>custom text</p>
        </c-el2>
    </template>
</dom-module>

c-el2

<dom-module id="c-el2">
    <template>
        <style>
            p::slotted(*){
               color:green;
             }
        </style>
       <p> <slot></slot></p>
    </template>
</dom-module>

Should the P with custom text , be rendered green ? or red?

As of now, the custom element c-el1 styles the P with custom text which is slotted in c-el2


<p> will be rendered red because the styles from c-el1 are overriding the styles from c-el2

If you were not styling the <p> in c-el1, the correct way to select the slotted element in c-el2 would be:

<dom-module id="custom-el2">
  <template>
    <style>
      :host ::slotted(p) {
        color: green;
      }
    </style>
    <slot></slot>
  </template>
  <script>
    class CustomEl2 extends Polymer.Element {
      static get is() { return 'custom-el2'; }
    }
    window.customElements.define(CustomEl2.is, CustomEl2);
  </script>
</dom-module>

More info on Polymer's <slot> here: Styling Slotted Content