I wanted to share my recent post on web component rendering analysis. A huge thanks to Brian Leathem, Andres Galante, and Dana Gutride for helping review this with me and raising different challenges along the way.
The key examples in this post are here:
I want to ask the community now for feedback and see what our other developers at Red Hat think about this. I've received a few early questions about this and I'd like to address them here first. Please feel free to add on to this discussion if you disagree!
"i'd like to see a discussion of loading/TTI on phones"
Can I pass arrays/objects to web components the same way I do angular directives or React components?
Ironically, web component "DOM" behaves the same way as other DOM. There is currently nothing in the browser spec which allows anything but strings in your DOM attributes. Rob Dodson mentions this as a current "platform" limitation. However, React and Angular provide "sugar" which enables you to pass arrays/objects to nested components. We can do the same thing with web components by selecting the DOM element with JS and setting properties or "instantiating" them as classes and setting them on initialization. Example of this with Skate JS here:
There's also been some discussion on how to make your web components behave more like React here:
Hope you enjoy the reading and dive in to this discussion :)