DEV Community

mizchi (Kotaro Chikuba)
mizchi (Kotaro Chikuba)

Posted on

Minimum Elm Component with Percel and WebComponents

yarn add parcel-bundle node-elm-compiler -D
Enter fullscreen mode Exit fullscreen mode

directories

elements/
  foo.js
  Foo.elm
run.js
index.html # import run.js
package.json
Enter fullscreen mode Exit fullscreen mode

Write elm-foo component

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

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

Run

Mount this elm-foo element.

// run.js
import "./elements/foo";
document.body.innerHTML = '<elm-foo></elm-foo>'
Enter fullscreen mode Exit fullscreen mode

Top comments (0)