CODEWITHSUNDEEP
csspolymerpolymer-2.x
epresas
epresas

Reputation: 132

How to access a grandchild element's css mixin in Polymer?

I have a Polymer component that uses another component in its template (a buttons container). Said child component also uses another component (the button itself) and I need to add some style to that button when it is disabled. Something like this:

<dom-module id="parent-component">
  <template>
    ... template elements
        <confirm-buttons-container id="child-component" config$="[[someConfigVariable]]" ></confirm-buttons-container>

  </template>
</dom-module>

And the child component is something like this:

<dom-module id="confirm-buttons-container">
  <template>
      <dom-if if="[[config.buttons.primary]]">
        <template>
          <grandchild-component-button class$="[[config.buttons.primary.class]]">
            <button
              id="primaryBtn"
              name="primary"
              inner-h-t-m-l="[[t(config.buttons.primary.text)]]"
              disabled$="[[config.buttons.primary.disabled]]">
            </button>
          </grandchild-component-button>
        </template>
      </dom-if>
  </template>
</dom-module>

The child component has a mixin that styles the grandchild component, that also has a mixin that styles the property I want to change. How can I reach said mixin from the parent-component when config.buttons.primary.disabled is true

Thanks in advance for any help.

Upvotes: 0

Views: 109

Answers (2)

agonzalezmc
agonzalezmc

Reputation: 113

First of all, the grandchild must to have a mixin in their classes/styles. If not it will be no possible access. https://polymer-library.polymer-project.org/2.0/docs/devguide/custom-css-properties#use-custom-css-mixins

Upvotes: 0

Vikas Harad
Vikas Harad

Reputation: 452

Add this css to your style:

 #parent-component #confirm-buttons-container [disabled="true"]{ color:red; }

Upvotes: 2

Related Questions