Host attributes and shadow dom

[Rob Stone]

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.

[Rob Stone]

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?

[Karl Tiedt]

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

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 polymer-dev...@googlegroups.com.
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.

[Rob Stone]

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?