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?
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 [email protected].
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.
