This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.
Once CSS Variables are in use, _every_ CSS Variable will come across a shadow boundary, which may lead to unintended consequences. Consider a situation where the shadow DOM subtree is using CSS Variables internally. Now, a CSS variable that's specified externally will stomp on them. Sadface ensues.
I think this case could be more common than just accidental name collisions. Consider nested use of the same component: Say my network configuration component has a tab strip for WiFi, IPv6, etc. and it is designed to be reused in different contexts. If someone puts it inside another tabstrip for Network, Display, etc. the variables set to configure the outer tabstrip will naturally apply to the inner one. (I think?) In general someone using a component inside another component, to make their use of that component really reliable, would have to reset the variables around the inner component, which means being fully aware of its default style. On the other hand, if the component is using variables for theming, the global application is probably what you want.
Moved to https://github.com/w3c/webcomponents/issues/94