I have a best practices question about Shadow DOM styling. In all the <http://www.polymer-project.org/articles/styling-elements.html#element-defined-styles> articles <http://robdodson.me/blog/2013/08/28/shadow-dom-styles/#theming> I've <http://robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet/#host> seen <http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-host>, the *:host()* rule is either used to react to user states (*:hover, :focus*), or, for theming, to a class. My question is about this second case. For example, core-toolbar <http://www.polymer-project.org/docs/elements/core-elements.html#core-toolbar> reacts to a *tall* class and becomes taller. Add a *mini* class to paper-fab <http://www.polymer-project.org/docs/elements/paper-elements.html#paper-fab> and it becomes smaller.
Is there any native element precedent for this behavior? It seems to me that in native-land *attributes* are used to customize elements (even when appearance is altered): - The global *hidden* attribute - *checked* and *indeterminate* for checkboxes <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type> - *reversed* for ordered lists <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol#Attributes> - *controls* for videos <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-controls> If I were a designer and I came across a *class="tall"* on an element and couldn't find the corresponding definition in my stylesheets, I would probably delete it. And then I would be really confused when the element's appearance changed. On the other hand, if I came across a *tall* attribute, I would naturally assume that the behavior/styles related to that were internal to the element. I think paper-button <http://www.polymer-project.org/docs/elements/paper-elements.html#paper-button> has this right with its *raisedButton* attribute. I have heard anecdotally that CSS attribute selectors are slightly slower than class selectors, but I think that even if this is the case, implementations could easily adapt if attributes became the defacto way to customize web components. Thoughts? 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/1ba3eab8-c693-4957-8380-89aee6fb2d1c%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
