3 ms·
> Polymer's CSS automatically spills over into the child components. Hm? No, the opposite, the shadow DOM provides CSS encapsulation.
by rictic 10y ago
> Polymer's CSS automatically spills over into the child components.
Hm? No, the opposite, the shadow DOM provides CSS encapsulation.
- Kiro 10y agoOk, sorry. I misunderstood it then. So what does this mean? "potentially including sub-components but not parent components"
- jondubois 10y agoYou 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.
- Kiro 10y agoOk, that's cool. I might try Polymer out but I think I'll stick with React due to the community aspect you mentioned.