When comparing Flow vs Web Components, the Slant community recommends Web Components for most people. In the question“What are the best solutions to "The JavaScript Problem"?” Web Components is ranked 29th while Flow is ranked 32nd. The most important reason people chose Web Components is:
Very extendable as a single-import base layer for visual controls and probably also something like a react-redux Provider.
Specs
Ranked in these QuestionsQuestion Ranking
Pros
Pro Checks to see if you check for Nulls
Because getting those exceptions is just not fun and very pervasive.
Pro Versioned type definitions
Pro There is support in many code editors via the extension
For example, there is good support through the extension in Visual Studio Code, which is a good editor for TypeScript, which is a competitor to Flow.
Pro Babel extension for strip of type annotations
Thanks to the Babel extension for the output, there is minimally modified code that is understandable to the author.
Pro Statical analysing of JavaScript code
Statical analysing of JavaScript code without pre-making any changes to it. But supported annotation types by extending the syntax of the language.
Pro Great for small—likely published—reusable libraries
Very extendable as a single-import base layer for visual controls and probably also something like a react-redux Provider.
Pro Works with any framework
Less recreation of the wheel and fewer wrappers.
Pro Fallback styling when not yet defined
Before a component's script defines the custom element—either as the page is loading or with JavaScript disabled—it can be temporarily styled via :not(:defined)
. This may prevent the need for SSR.
Pro Customizable templates via custom-recognized "slots"
slot="name"
and <slot name="name">
for customizing a component's HTML in specific areas of its shadow DOM. Also fallbacks when not defined.
Pro Stylable via custom-exposed "parts"
::part(name)
pseudo-element for styling elements within a component's shadow DOM.
Cons
Con Weak base type definitions even for popular JavaScript libraries
For example, there are definitions for Gulp, React.
Con Not well-suited for application wiring
Having to serialize/deserialize data between components is not convenient. You'll probably still need a [light/simple] framework. Some things are still quite nice, such as using the light DOM -- think <option>
with <select>
and <datalist>
.
Con SSR is potentially more difficult
…if you need more than CSS' :not(:defined)
, that is.
Check out this video to see how the creator of SkateJS handled it: https://www.youtube.com/watch?v=yT-EsESAmgA