Elm and Web Components

One of the talks from Elm Europe 2018 conference was the one about When and how to use Web Components with Elm by Luke Westby, creator of the popular Elm live editor Ellie.

In this fun and enlightening talk, he suggests an alternative way of using external JS libraries in Elm, rather than relying on ports. Ports, although being the standard way of communicating with external JS in Elm, might not be the right tool for some particular situations, especially when your application grows and you need to handle a significant amount of them. The alternative way he exposes is using Web Components, which is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps. This solution blew up my mind, so I couldn't resist trying it out myself, and I had the perfect project for it :) wayback

Code Mirror Custom Element Example github

Mutation observer