Web Components rendering performance

Question

Is Web Components give better performance when compared to Native HTML elements. Since each elements getting mutated only when getting attached to DOM. So, expensive operations inside Element callbacks leads to poor performance.

I wrote one sample Web Component with some expensive implementation in connectedCallback handle, When I try render the component, each component took time in a consecutive order.

I don't see any reference related performance pin points on Web Components.

---

Update 1

I have a created small page with Native and Web Component implementation, Seems Web Components page took 4ms to finish but Native took only 1ms. Refer my Performance screens. In Web Components scripting is taking more time.

Native HTML Example:

---

Web Component Example:

Answer 1

Since Custom Elements are extending native HTML elements (through class extends HTMLDivElement), with extra features added, I would say: in the best case, they can only be as good as native HTML elements.

The gain in performance is when compared with 3rd party frameworks (that don't leverage this new technology): Web Components should be faster.

You can see it when comparing native vs polyfilled Custom Elements implementations.

Answer 2

You can greatly improve the performances of your web component using StencilJS (github). It will do a lot of optimisation work pretty easily, as well as implementing a Virtual DOM to your web component for an optimal rendering.

You can check the performances here.