I'm not sure I understand you as I only have a single selector now for the closed state, I can't see how switching it around (so the default is closed) could be any more simple?
On Monday, 4 July 2016 09:45:01 UTC+1, Karl Tiedt wrote: > > 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] > <javascript:>> 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] <javascript:>. >> 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/3c881cbd-8193-40e7-b981-d7329a5dcafe%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
