Custom Elements: An end to the Framework Wars

Custom Elements: An end to the Framework Wars

3 6


Custom Elements are a web standard for creating custom DOM elements. Learn how to use these elements to integrate into the JS API into frameworks like Angular, Ember and React or build simple web applications by composing elements together.

On Github patrickarlt / custom-elements-dev-summit-2016

Custom Elements: An end to the Framework Wars

Patrick Arlt | @patrickarlt

The Framework Wars Peace Talks

JavaScript Tooling Fatigue

JS Tooling Incompatibility

  • JS API w/ Common JS based systems
  • Angular Service vs Ember Data
  • Dojo Plugins vs Webpack Loaders vs System JS Plugins

Lets Learn to Share…

My tools dont work with your tools…

  • ArcGIS Open Data: Ember
  • ArcGIS For Developers: Angular 1
  • ArcGIS Insights: Angular 2
  • ArcGIS Online: Dojo
  • Storymaps: JQuery

R&D Project

How can we share UI code?

Across any framework, using any build system,with any module format?

Our Component Based Future

Write UI Components once.

Components work with any framework.

Frameworks manage components, routing and data.

Web Components

Extend the DOM to create new HTML Elements.

Wait, What!?!

demo dom elements, attributes, events

But, Why?

JavaScript has lots of tool to work with DOM (Frameworks, Libraries, Toolkits, Native DOM APIs), if we can extned the DOM we can write custom code that interoperates with ALL those tools.

demo dom elements, attributes, events

Web Components

Extend the DOM to create new HTML Elements.

<esri-web>, <open-data-search>, <calcite-modal>

Ok, Web Components

  • Templates ✓ Done
  • Shadow DOM ⚒ In Progress
  • Custom Elements ⚒ In Progress
  • HTML Imports ✕ Abandoned

Shadow DOM v1 statusChrome:

— Polymer (@polymer) September 16, 2015

Shadow DOM v1

Total rewrite of the spec. All major browsers have agreed to impliment!

Safari and Shadow DOM

Custom Elements Rewrite

Spec rewrite, Safari has begun implementation. IE will likely impliment.

Web Standards at Work!

Some Custom Elements

  fields="record_count, item_type"></opendata-search>
<calcite-modal id="dialog-modal" aria-label="Confirmation Modal">
  <p>Comfirm something.</p>
  <button type="button" data-calcite-action="close-modal" class="btn">Ok</button>
<arcgis-share-item itemid="44612e6217d34f40b1ce2a48f367e90a"></arcgis-share-item>

<template id="popup">

{Station_Na} {Street_Add} {City}, {State}, {ZIP}

Fuel Type: {Fuel_Type}

Phone: {Station_Ph}

Open to: {Groups_Wit}

Hours: {Access_Day}

</template> Demo
  map-id="map" basemap="gray"></esri-feature-layer>

Now for the magic…



We built 3 componets to make a simple app.

Reused components in 5 different frameworks.

Common Concerns



Browser/Spec Stability?

Our Polyfilling Future


Proven in production, will still keep working once the new spec is implimented.


All browsers will impliment Shadow DOM this year. One browser besides Chrome will ship Custom Elements in a stable release.

Whats Next

  • Open Data - <opendata-search>
  • ArcGIS for Developers - blogs, downloads, ect...
  • Custom Elements for JS API Widgets

More Notes

Thre is lots of additional info about the demos and my research on GitHub.
Custom Elements: An end to the Framework Wars Patrick Arlt | @patrickarlt