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