7

I've been reading about Angular 2's style encapsulation methods where you can write your styles directly into the component.

This method can use the native shadow dom or an emulated one. What are the performance benefits to using either for component specific styles?

zgue
  • 3,793
  • 9
  • 34
  • 39
Ben Racicot
  • 5,332
  • 12
  • 66
  • 130
  • 1
    Nice article: https://rutlib5.com/book/27706/p/98 – Envil Jul 26 '18 at 06:29
  • 1
    This article shows benchmarking that was done to compare the shadow dom and the emulated shadow dome: https://nolanlawson.com/2021/08/15/does-shadow-dom-improve-style-performance/ It indicates that it is scenario dependent as to which is faster, but my takeaway from reading it is that the native shadow dom will be faster in the long run. – jake Nov 18 '22 at 14:11

2 Answers2

6

It`s a pity, but there are performance problems with emulated styles encapsulation. The thing is, Angular uses attributes to apply CSS rules. And the use of them is not efficient, especially in the current version of Edge.

Here you can see some benchmarks as a proof. https://medium.com/@andreygoncharov/edge-hates-you-attributes-d15faf162939

So in 2017 maybe you should avoid using Angular styles encapsulation when developing big projects.

Here you can check the status of the issue.

Mike Kovetsky
  • 1,638
  • 1
  • 14
  • 24
4

For emulated there are not performance benefits. It's just style encapsulation that automatically scopes styles to specific components.

emulated

With AoT the style rewriting is done at build time, otherwise it takes quite some time at runtime to analyze and rewrite the styles.

The styles are then added to the <head> element.

native shadow DOM

There are some performance benefits because the browser in some situations can know that some required re-render is local to a component, which could otherwise cause full page re-render. I don't know a concrete example though.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 2
    Great! Now we're getting somewhere... instead of voting to close the question as some jerk did... I'm seeing dev based benefits to encapsulating styles but performance benefits that are not expressed in the docs would be a major reason to adopt a workflow with whichever method has the most benefits. – Ben Racicot Jan 12 '17 at 02:49
  • 1
    Emulation doesn't provide performance benefits and native isn't used much because the theming story is too weak. Angular doesn't support CSS variables and even these are too limited IMHO. Also the perf benefits are not specific to Angular, but to shadow DOM. It doesn't make sense IMHO to repeat all browser docs in Angular. – Günter Zöchbauer Jan 12 '17 at 04:20