Minimum Elm Component with Percel and WebComponents

・1 min read

yarn add parcel-bundle node-elm-compiler -D

directories

elements/
  foo.js
  Foo.elm
run.js
index.html # import run.js
package.json

Write elm-foo component

-- elements/Foo.elm
import Html exposing (div, text)
main = div [] [text "foo"]
// elements/foo.js
import { Elm } from "./Foo.elm";

customElements.define(
  "elm-foo",
  class extends HTMLElement {
    connectedCallback() {
      Elm.Main.init({ node: this });
    }
  }
);

Run

Mount this elm-foo element.

// run.js
import "./elements/foo";
document.body.innerHTML = '<elm-foo></elm-foo>'
DISCUSSION
Classic DEV Post from Jan 29

I'm a frontend developer. Or am I?

As a frontend developer, I've always found it difficult to draw the line betwee...

Koutaro Chikuba
Frontend Engineer in Japan.
Join dev.to ❀️

The heartbeat of the software industry.