4 ms·

The things I'm curious about with Shadow Dom: - How does it affect performance, if say, a large application is composed of many shadow dom elements, each conta

The things I'm curious about with Shadow Dom: - 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?

Zikes 11y ago
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.html#xscope-styling-details 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-components/ https://hacks.mozilla.org/2015/06/the-state-of-web-component...
- arota 11y ago
  The last I had read[1], the intention is to deprecate shadow piercing combinators altogether. [1] - https://www.w3.org/wiki/Webapps/WebComponentsApril2015Meeting https://www.w3.org/wiki/Webapps/WebComponentsApril2015Meetin...
  - Zikes 11y ago
    I guess that would make it discouraged in all cases, then.
spankalee 11y ago
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/ http://tabatkins.github.io/specs/css-apply-rule/

Zikes 11y ago

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.html#xscope-styling-details 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-components/ https://hacks.mozilla.org/2015/06/the-state-of-web-component...

arota 11y ago
The last I had read[1], the intention is to deprecate shadow piercing combinators altogether. [1] - https://www.w3.org/wiki/Webapps/WebComponentsApril2015Meeting https://www.w3.org/wiki/Webapps/WebComponentsApril2015Meetin...
- Zikes 11y ago
  I guess that would make it discouraged in all cases, then.

spankalee 11y ago

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/ http://tabatkins.github.io/specs/css-apply-rule/