- How does it affect performance, if say, a large application is composed of many shadow dom elements, each containing a large amount of redundant CSS?
- Will there be a way to let certain css styles "leak" through while encapsulating others? Or is any type of native inheritance gone?
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.
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...
[1] - https://www.w3.org/wiki/Webapps/WebComponentsApril2015Meetin...