I have a component that is basically a collapse/show panel, with a host
attribute called 'state' that can either be 'open' or 'closed'. I use this
attribute state to toggle some styles on elements within the control
similar to:
<template>
<div id="title"><img id="groupToggle" src="chevron.svg"></img></div>
<div id="items">
<template is="dom-repeat" items="[[items]]">
....
</template>
</div>
</template>
My styles are:
:host[state="closed"] #items {
max-height: 0px;
transition: max-height 0.3s ease-in-out;
}
:host[state="closed"] #groupToggle {
transform: rotateZ(-90deg);
}
This all works perfectly well (across all 3 main browsers) with shady DOM
but the moment I enable shadow DOM it breaks. I can't see anything in the
docs that suggests any issues in this area and before I start trying to do
it another way I thought I would check here.
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/57673ce6-d3ba-45dc-98b9-774d41af94b6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
