When comparing Reason ML vs Web Components, the Slant community recommends Reason ML for most people. In the question“What are the best solutions to "The JavaScript Problem"?” Reason ML is ranked 7th while Web Components is ranked 29th.
Specs
Ranked in these QuestionsQuestion Ranking
Pros
Pro Uses the excellent Bucklescript Ocaml to Javascript transpiler
Pro Superior type inference
Ocaml type inference is so smart that you never have to repeat yourself and keep code very clean, type errors also are very pleasant.
Pro Aims to make the transition from Javascript easier
Despite being a completely different language Javascript programmer will find that the syntax of ReasonML has many familiarities with Javascript.
Pro Uses established compiler technology from Ocaml with a tweaked syntax that leans more towards Javascript
Pro Removes JavaScript "bad parts" but sticks to it's design philosophy
unlike other js-targetting languages that are thought as a way to have a language that pleases community X run in a browser, reason is really designed with JavaScript community in mind. it removes the bad parts but keeps its syntax and its best design principles (from Scheme): simplicity, minimalism, and functions as building block.
Pro Immutability with escape hatches
reason includes true immutability, but it has escape hatches to let you use mutations in exceptional cases.
Pro Compiles to JavaScript or assembly (ocaml)
The same reasonml code can compile to js (eg. run on browsers or node.js, use any lib in npm), or compile to assembly thru ocaml (unless of course you load js externals), running on any device, with C-comparable (or better) performance.
Pro JSX syntax natively supported
Reason was created by the creator of react, for developers already using JSX to template web or native UIs this results very familiar.

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 A standard async syntax is pending
Async syntax is not standard across native/js projects and in both cases a bit awkward for non-ocaml devs. Currently this is reasonml most voted issue in their GitHub repo so hopefully, there's news soon.
Con Ecosystem is a mess
A wonderful language, but a user is required to use multiple different package managers for many things (esy, bsb, npm). Some standard templates from bsb (e.g. react-starter) are not installable out of the box.

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
