Using *<custom-elements>* in production https://thomaswilburn.github.io/slide-dash-show Who am I? Thomas Wilburn *@thomaswilburn* pretty much everywhere Data journalist, The Seattle Times Web components 101 Custom elements, templates, shadow DOM, HTML imports See also: Angular directives, React components, Polymer Guild Wars 2 Web components at The Seattle Times The Times is one of the *largest deployments* of custom elements in the world.* We use them on a daily basis, in front of a general audience. Why use components? Reusable building blocks Simple DSLs for non-coders No proprietary frameworks Our methodology *Polyfill* for custom elements *Build system* for everything else We have a template <image-slider> Creates before/after image comparison declaratively source / demo #1 / demo #2 Images, but better! <image-slider> <img src="first.jpg" alt="First!"> <img src="second.jpg" alt="Second!"> </image-slider> <svg-map> Used on our election pages to load inline SVG Caches resources and provides DOM utilities demo Sweet, sweet vectors! <svg-map src="assets/countyMap.svg"> </svg-map> <script> svgMap.eachPath(".county", shape => { // update map styles with results }); </script> <leaflet-map> Basic users can build locator maps quickly Advanced users can skip past Leaflet boilerplate demo Declarative maps! <leaflet-map lat="47" lng="-122" zoom="7"> <tile-layer layer="cartoPositron"></tile-layer> <map-marker lat="47" lng="-122" id="marked"> This is the pop-up content! </map-marker> <geo-json> { features: [...] } </geo-json> </leaflet-map> JS interface on the element *element.leaflet* and *element.map* for instance objects *element.lookup* to access generated content via ID Live from Cascadia! This slideshow itself is a web component. https://github.com/thomaswilburn/slide-dash-show/ (Cue fumbling around in the dev tools) Where do we go from here? *registerElement()* is being replaced. *customElements.define()* is relatively similar. Polyfills: don't think obsolete, think *vintage* If I've convinced you... Build small, self-contained elements to start Work with the grain of the DOM Don't re-invent <select> Write with an eye on the V1 spec </slide-show> Got questions? tbone*@thomaswilburn*.net