Attribute-based styles not always updated

[anniesullie]

I made a jsfiddle to reduce a problem I was seeing in a larger app:
http://jsfiddle.net/mYEcL/

My custom element has a table, and an attribute that can be set to the id of a column header. When the attribute is changed, a style should be applied to the column header. I implemented this by setting a second attribute on the element and styling th[myattr=val] in the custom element.

When I change the attribute from a click handler inside the element, the style is applied correctly. When I set the attribute from a script outside the element, the style is not always applied.

You can reproduce in the jsfiddle by clicking on the "One" and "Two" table headers in the custom elements, and the "Highlight One" and "Highlight Two" buttons. The "Highlight Two" button never highlights the "Two" column, even though the attribute gets set properly. This doesn't happen when clicking on the column itself.

[sjmiles]

Hi Annie,

Confirm your problem, we believe this is a ShadowDOM bug in Blink. We will file a ticket for it (and post a reference here).

Steve discovered that adding style="display:table-cell" to #two makes the problem go away, at least in the fiddle. Perhaps that is a workaround for you until the core bug is fixed.

Also, I took the liberty of creating a second version of your fiddle just to show how we would reduce it using a bit more Polymer methodology. Let me know what you think.

http://jsfiddle.net/vYE4g/4/

[anniesullie]

Thanks for the quick response! style="display:table-cell" successfully worked around the problem in my larger app as well.

And thanks for the hint about classFollows. Are there docs I should be reading to know about functions like that?

[sjmiles]

Are there docs I should be reading to know about functions like that?

Sorry, not really. We are still early days for the high-level stuff, we've spent most of our time working on the polyfills. We do recognize the important of docs, and very much appreciate you being a trail-blazer. I literally expect this conversation we are having to be useful for others. =P

Fwiw, the 'base' api that all polymer elements receive is spelled out here: https://github.com/polymer-project/polymer/blob/master/src/base.js

... and I will make a ticket to add inline doc comments there asap.

[sorvell]

It looks like this has been fixed on the latest canary.

Here's an updated fiddle which uses the new cdn:
http://jsfiddle.net/mYEcL/2/