Performance will be better with Shadow DOM. The styles are deduplicated (in Chrome at least, and I believe Firefox too), and the style boundary adds opportunities for optimization.

There will be ways for styles to leak. The Polymer team has added a polyfill for CSS Custom Properties and CSS Mixins (the @apply rule [1]).

Custom Properties cross shadow boundaries, and @apply lets you define properties sets that are applied later down the cascade. This lets components define very targets sets of custom properties that they apply to specific elements within their shadow root.

[1]: http://tabatkins.github.io/specs/css-apply-rule/

Because a template would define the styles once, but be stamped multiple times, there should be minimal redundant copies of the styles themselves. How this performs will remain to be seen, as it would be up to the browsers to implement the spec optimally.

You can "pierce" the shadow DOM with the ">>>" combinator (previously /deep/), allowing you to style elements from outside of the shadow DOM. This is discouraged in the case of web components, however, as a component is supposed to operate as a black box entity. Instead, a component can expose APIs for styling, such as with CSS variables: https://www.polymer-project.org/1.0/docs/devguide/styling.ht...

Edit: This article[1] has details on performance and styling options.

[1] https://hacks.mozilla.org/2015/06/the-state-of-web-component...

The last I had read[1], the intention is to deprecate shadow piercing combinators altogether.

[1] - https://www.w3.org/wiki/Webapps/WebComponentsApril2015Meetin...

I guess that would make it discouraged in all cases, then.