Custom Elements and Shadow DOM Cross-framework Web Development Patrick Arlt | @patrickarlt Slides: http://bit.ly/2lZU2lI Code: http://bit.ly/2mkyqRN I'm starting to notice something about JavaScript Frameworks…

{{delete-button 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 Components Web Components allow creating custom HTML tags like our . But without a framework. Why Web Components Write components once, consume in any framework. Abstract differences in systems via HTML. The Web Component Standards

Custom Elements

Shadow DOM Templates

HTML Imports Custom Elements Register 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 API By combining custom elements and the JS API we can make reusable mapping components that we can custom HTML Elements and share across frameworks.

- Demo

- Demo

- Demo 2 Problems

Change the content of our toggle?

Isolate the implimentation details of our components? Shadow DOM Reduce the "global" nature of JavaScript, CSS and HTML.

Isolate internal DOM inside components - Demo

Scope CSS inside components - Demo Compose external DOM and interal DOM - Demo Shadow DOM isolates the DOM and CSS of our . Demo Quick Review

3 custom elements

Isolated DOM and CSS Web Components in Frameworks

React Angular Maximize Compatibility

Always 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 Support Chrome Safari Edge Custom Elements ✓ ✓ In-Dev Dev Soon Shadow DOM ✓ ✓ In-Dev Dev Likely Templates ✓ ✓ ✓ ✓ HTML Imports ✓ ✕ ✕ ✕ Using Custom Elements Today

1. Polyll the spec Web Components polyll Lightweight ~3k polyll

2. Compile with Babel or TypeScript Makes the new ES2015 class syntax work Custom Elements on ArcGIS for Developers Share code among the different build systems and tools

~16 elements total Use Cases for Custom Elements Custom Elements are best for sharing code among different sites, frameworks and apps. Don't make apps, make UI components. Using Shadow DOM Today Don't. The ShadyDOM and ShadyCSS polyll are highly unstable. The Future of Shadow DOM Soon. Bright Future

Shadow DOM will get wide support

Custom Elements is easy to use and polyll 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!