DEV Community

mizchi (Kotaro Chikuba)
mizchi (Kotaro Chikuba)

Posted on

Minimum Elm Component with Percel and WebComponents

#elm 
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)