And fixed!
I had a look at some of the polymer paper elements (paper-checkbox to be
specific) and noticed that the 'host' styling should be:
:host([state="closed") ...
I suspect the shady DOM implementation is being more lenient than it should
be?
On Monday, 4 July 2016 09:13:53 UTC+1, Rob Stone wrote:
>
> 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/a57de8b2-c3c7-4232-9e20-b18f9112d789%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
