When comparing Idris vs Web Components, the Slant community recommends Idris for most people. In the question“What are the best solutions to "The JavaScript Problem"?” Idris is ranked 6th while Web Components is ranked 29th. The most important reason people chose Idris is:
Idris not only has support for type classes, but is a fully dependently typed language, giving you the full power to statically verify your code.
Specs
Ranked in these QuestionsQuestion Ranking
Pros
Pro Full dependent types
Idris not only has support for type classes, but is a fully dependently typed language, giving you the full power to statically verify your code.
Pro Domain driven design and type driven development
Because of full dependent types in Idris, the programmer can focus more on modelling the domain with types and waste less time fixing common bugs that the type checker will catch. Dependent types help apply type driven development and a lot of code auto generation, making the compiler and type checker an ally in developing working software instead of just getting in the way.

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 Not widely used
Con Not widely used
Con Weaker type inference
As type inference is undecidable for dependently-typed languages, Idris cannot offer the full type inference that Haskell supports, and so more type annotations will be needed.
Con Different semantics from Haskell
Idris, while similar to Haskell, has strict semantics, which may cause some confusion if your backend is done in Haskell. If using Idris, it would make sense to do the backend in Idris as well, if not for the fact that Idris currently has fewer libraries available for web development than Haskell.

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
