Honestly just by making components and benchmarking them. Webcomponents are too new to really have a solid best practices guide at the moment and there's a lot

Honestly just by making components and benchmarking them. Webcomponents are too new to really have a solid best practices guide at the moment and there's a lot of varried opinions out there. My main recommendations are to benchmark early and often. Tachometer is a library from the polymer team that I find does this very well: https://github.com/Polymer/tachometer https://github.com/Polymer/tachometer I.e. for testing shadowroot performance, I threw this together: https://github.com/jjcm/shadowTests https://github.com/jjcm/shadowTests You can see the results here: https://raw.githubusercontent.com/jjcm/shadowTests/master/result.png https://raw.githubusercontent.com/jjcm/shadowTests/master/re... TL;DR - a custom element with no shadowroot is about twice as fast.