- Custom Elements in Elm
- Hello
- Interop
- Ports
- View Interop
- Example
- View Interop Needs
- Solution: “use the platform”
- Custom Elements
- Custom Elements
- Html.node
- Example
- Benefits
- Issues
- Big issue: VirtualDom awareness
- Small issue: Browser support
- In Production
Hello
Interop
Ports
View Interop
Example
View Interop Needs
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 }})Custom Elements
Html.node
Example
Benefits
Issues
Big issue: VirtualDom awareness
Small issue: Browser support
In Production