Loading...

​​Custom Elements in Elm

​​Hello

• ​​I’m Luke

• ​​I work at NoRedInk

• ​​I’m a member of the Elm core team

• ​​I made Ellie

​​Interop

• ​​No more Native code

• ​​The only way to interoperate with the platform is via the platform

• ​​port​s from the Elm side

• ​​The Web APIs from the JS side

​​Ports

• ​​Actor model

• ​​Fully async

• ​​Map directly to imperative APIs

• ​​What about the view?

​​View Interop

​​Example

• ​​Google Maps

• ​​https://ellie-app.com/58bkzj8rta1/0

• ​​Scaling overhead is high

• ​​Prominent example: elm-mdl

​​View Interop Needs

• ​​“Proprietary” views

• ​​Performance-critical visuals

• ​​Required synchronous reactions

• ​​Ancillary local state

• ​​Browser hacks!

​​Solution: “use the platform”

​​Custom Elements

​​customElements.define('my-tag-name', class extends HTMLElement {

​​  constructor() {

​​    super()

​​    // initialize

​​  }

​​  

​​  // intercept changes to _properties_ on an element in JS

​​  get something() { /* ... */ }

​​  set something(value) { /* ... */ }

​​  

​​  attributeChangedCallback(name, previous, next) {

​​    // intercept changes to _attributes_ on a tag in the HTML

​​  }

​​  

​​  connectedCallback() {

​​    // called when the element has been fully inserted into the DOM

​​  }

​​  

​​  disconnectedCallback() {

​​    // called when the element has been fully removed from the DOM