> You can do cool stuff like allow a sub-component's style to change automatically as you move it from one parent component to another.
I don't like this at all. I want all the styles to be encapsulated to the component only. It shouldn't matter what parent component it's in. Polymer's CSS automatically spills over into the child components.
You CAN optionally have styles from a parent component affect child components but you can also restrict the styles to the host component only (excluding children) if that's what you want.
I find that often though, I like the host component to affect the style of child components - For example, let's say we have 2 container components which hold a list of items; one container component shows its items as rows and the other component shows items as thumbnails (with a picture). In this case we want the parent container component to affect the style of the child item (thumbnail vs row). If we were to drag an item from one container and drop it into another, we would want the style (thumbnail vs row) of the new parent container to take effect on the child (without having to imperatively update styles in the child).
The danger in traditional (non-WebComponents) CSS is not the cascading aspect of it; it's the fact that it's global. If you localize CSS to components such that it only cascades downwards in the DOM hierarchy, then it solves all your problems.
Also, because of the CSS specificity rule, style properties defined in the child will overwrite those from the parent, so the child always gets the last say about how it looks - With this approach, the child can effectively decide which CSS properties its parent is not allowed to modify.
I don't like this at all. I want all the styles to be encapsulated to the component only. It shouldn't matter what parent component it's in. Polymer's CSS automatically spills over into the child components.