Also might suggest using a common property like 'opened' and set your host CSS to your closed state CSS and then you have only one simple attribute selector that is your opened state...
Ultimately the same thing, but you'll be following principles that the core Polymer components are using as well. -Karl Tiedt On Mon, Jul 4, 2016 at 1:25 AM, Rob Stone <[email protected]> wrote: > 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 > <https://groups.google.com/d/msgid/polymer-dev/a57de8b2-c3c7-4232-9e20-b18f9112d789%40googlegroups.com?utm_medium=email&utm_source=footer> > . > > For more options, visit https://groups.google.com/d/optout. > 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/CADNgbTF2giBQ2w_ja32R0qdbRexZKgbRfVqfqfHYYF60gxYoRw%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
