Custom Elements and Shadow DOM

Cross-framework Web DevelopmentPatrick Arlt | @patrickarlt

Slides: http://bit.ly/2lZU2lI

Code: http://bit.ly/2mkyqRN

I'm starting to notice something about JavaScript Frameworks…

<!-- Angular 2 --> <delete-button [item]="..." (click)="..."></delete-button>

<!-- Vue JS --> <delete-button item="..." v-on:click="..."><delete-button>

<!-- Ember --> {{delete-button item="..." onclick="..."}}

<!-- React --> <DeleteButton item="..." onClick="..." />

Trees of Components…Manage a tree of components

Pass data down

Listen for events up

Wait a sec isn't this just the DOM?

Enter Web ComponentsWeb Components allow creating custom HTML tags like our

<delete-button> . But without a framework.

Why Web ComponentsWrite components once, consume in any framework. Abstract differences

in systems via HTML.

The Web Component StandardsCustom Elements

Shadow DOM

Templates

HTML Imports

Custom ElementsRegister custom HTML tags with the browser.

class MyElement extends HTMLElement { // return an array of the attribute names you want to watch for changes. static get observedAttributes() { return ['attribute']; }

// called when the element is first created. You must call `super()` constructor () { super(); }

// called when the element is added to the DOM connectedCallback () { }

// called when the element is removed from the DOM disconnectedCallback () { }

// called when one of your `observedAttributes` changes attributeChangedCallback (attr, oldValue, newValue) { } }

// first parameter is the tag name, second is the class customElements.define('my-element', MyElement);

Custom Element and The JS APIBy combining custom elements and the JS API we can make reusablemapping components that we can custom HTML Elements and share

across frameworks.

<arcgis-web-map> -

<arcgis-layer-list> -

<arcgis-basemap-toggle> -

Demo

Demo

Demo

2 Problems

Change the content of our toggle?

Isolate the implimentation details of our components?

Shadow DOMReduce the "global" nature of JavaScript, CSS and HTML.

Isolate internal DOM inside components -

Scope CSS inside components -

Compose external DOM and interal DOM -

Demo

Demo

Demo

<arcgis-basemap-toggle>Shadow DOM isolates the DOM and CSS of our

<arcgis-basemap-toggle> .

Demo

Quick Review3 custom elements

Isolated DOM and CSS

Web Components in FrameworksReact

Angular

Maximize CompatibilityAlways use this.dispatchEvent and CustomEvent

Don't use fancy event names like web-map-setup . Use

webmapsetup instead

Always declare matching properties for your attributes

Modern Browser SupportChrome Safari Firefox Edge

Custom Elements ✓ ✓Shadow DOM ✓ ✓Templates ✓ ✓ ✓ ✓HTML Imports ✓ ✕ ✕ ✕

In-Dev Dev Soon

In-Dev Dev Likely

Using Custom Elements Today1. Poly�ll the spec

2. Compile with Babel or TypeScript

Makes the new ES2015 class syntax work

Web Components poly�ll

Lightweight ~3k poly�ll

Custom Elements on ArcGIS for Developers

Share code among the different build systems and tools

<developers-download-button>

<developers-sign-in>

<developers-search>

~16 elements total

Use Cases for Custom ElementsCustom Elements are best for sharing code among different sites,

frameworks and apps.

Don't make apps, make UI components.

Using Shadow DOM TodayDon't. The and poly�ll are highly unstable.ShadyDOM ShadyCSS

The Future of Shadow DOMSoon.

Bright FutureShadow DOM will get wide support

Custom Elements is easy to use and poly�ll

Thank You!Slides: http://bit.ly/2lZU2lI

Leave Feedback

Download the Esri Events App

Go to Dev Summit

Select "Custom Elements and Shadow DOM:

Cross-framework Web Development"

Leave a Review!