Possible to make this work with Custom Elements?

[trusktr]

un is nice for being agnostic to framework (and being able to easily replace the underlying framework.

Is there a way for this work with Custom Elements? Or does it already?

[dmitriz]

Thank you! That is an interesting question.

In a way un tries to do the job of the Custom Elements, where an uncomponent is serving the same purpose. You create it with pure JavaScript functions and mount on an element like in this example: https://github.com/dmitriz/un/blob/master/examples/active-counter/index.js#L54

So I presume you question is whether instead of calling the mount, you place it inside your HTML like a custom tag? I suppose that should work if you can define the custom element that simply appends a new element and calls the mount function onto that element at the time of initialisation.

However, there might be a problem with browser support:
https://caniuse.com/#feat=custom-elements
Also listed as "under consideration" for the Edge, so may take a while.

Further, even if supported, to use it say with React, you would need to inline it inside the JSX,
or equivalently, pass as argument to the React's createElement factory. And the next question is, whether React will correctly recognise when that custom element needs to update. Will that work with CE? That might be a problem with any virtual-dom based framework.

On the other hand, un can provide the same functionality by extending its mount function with a React adapter as suggested in #2 . That will guaranteed work with any browser in any React setup. And only the adapter part is React-specific. So you can use the same uncomponent with Angular or framework X by wrapping it into the Angular or X adapter.