Polymer - Access style attribute inside shadow

[santiago esteva]

Given I extend the paper checkbox element so I can customize themes for example:

<polymer-element name="my-checkbox" extends="paper-checkbox" noscript>
  <template>
    <link rel="stylesheet" href="my-checkbox.css">
    <shadow></shadow>
   </template>
</polymer-element>

On my css I do

:host {
  padding: 20px 20px 20px 0;
}
:host::shadow #checkbox.checked {
  border-color: blue;
}
:host-context(.my-theme)::shadow #checkbox.checked {
  border-color: red;
}

:host-context(.my-theme)::shadow #ink {
  color: red;
}

The when I unit test or run a demo like this:

<section class="my-theme">
  <div center horizontal layout>
    <div flex>Vibrate on touch</div>
    <my-checkbox id="myCB"></my-checkbox>
  </div>
</section>

I would like to assert the theme has been applied. So in the console or in my unit test I want to access the style.color or style.borderColor but it is always empty when I do so. I query for the element, then I look into its shadowRoot and even the olderShadowRoot since paper element uses shadow as well and then I query for the checkbox itself and the color is an empty string. Code works but I cannot unit test it or even assert it on the console.

myCb.shadowRoot.olderShadowRoot.querySelector('#checkbox.checked').style.borderColor

Is the theme applied later on the cycle? Do I need to wrap it inside a sync statement?

[Scott Miles]

Styles applied via CSS never appear on an element's `style` object. The `style` object can specify per-instance styles that are combined with CSS styles into the eventual computed-style. The first thing for you to do is investigate using the window.getComputedStyle API instead of examining the `.style` property itself.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/7e3395ec-ef67-422b-8dc0-efb908ba8081%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.