Minimum Elm Component with Percel and WebComponents

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>'

Blog

Minimum Elm Component with Percel and WebComponents

Koutaro Chikuba

Write elm-foo component

Run

Join Our Newsletter. No Spam, Only the good stuff.

Related