44: Elm and Web Components - JSToElm
All Episodes

44: Elm and Web Components

Based on 2 events. Luke Westby's talk at Elm Conf, and the most recent episode of the frontend Happy Hour podcast about.... web components. So I've heard about them, and meh, didn't seem to solve any immediate problems I've been having, but I don't actually know enough about them to actually apply them to any problem I encounter!

What is web component

  • Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

  • Build on 4 specifications

    • Custom Element specifications

    • Shadow DOM

    • You can think of shadow DOM as a scoped subtree inside your element.

    • HTML Imports <—at this point more going on then I thought! —>

    • HTML Template

  • Libs to help build custom web elements

    • Bosonic is a collection of components designed to meet the everyday needs of web developers.
    • Polymer provides a set of features for creating custom elements.
    • SkateJS is a JavaScript library for writing web components with a small footprint.
    • Slim.js is an opensource lightweight web component library that provides data-binding and extended capabilities for components, using es6 native class inheritance.
    • Stencil is an opensource compiler that generates standards-compliant web components.
    • X-Tag is an open source JavaScript library that provides an interface for component development.
  • This may be a silly question, but where does the JS go?

    • I’m looking at web components and having visons of html, js, and css files in my project again?
    • Is it bc polymer is using bower?
    • i thought that was totally depreciated!!!!
  • OK. So it seems web components have been trying to get a foothold for a while now. I like Rob’s rebuttal about not being mutually exclusive. “React build a better mousetrap”

What problem does it solve

  • creating component based web apps?
  • I think we got that with react, anything missing?
  • Where’s the win?
  • Let’s look at a ploymer app

    • npm install
    • npm start
    • polymer serve
  • Let’s build a little ploymer app?

    • The HTML is used for configuration and sets the initial state of the page.
    • I have a hard time being ok with this. for so many years, the index.html page is for bootstrapping my app. no more.
    • I’ve even declared proudly, as a frontend developer, the only HTML i write is the index file to host my app!
  • Maybe I don’t know as much about web dom as I thought?
 <app-drawer-layout fullbleed="" narrow="{{narrow}}">
        <!-- Drawer content -->
        <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
  • NOPE. The one thing I could not stand was the [[]] or {{}} syntax in quotes assigned to a element property

Can I use it in my Elm code

  • Luke says I can, but I’m not sold that this is the time for me to saddle up.
  • What does web components do for me now?


Front End Happy Hour



Published 2 Aug 2018

A show about learning Elm, Functional Programing, and generally leveling up as a JS developer.
JavaScript To Elm on Twitter