Custom Elements and Shadow DOM - Esri€¦ · Custom Element an d The JS A P I By combining custom...
Transcript of Custom Elements and Shadow DOM - Esri€¦ · Custom Element an d The JS A P I By combining custom...
Custom Elements and Shadow DOM
Cross-framework Web DevelopmentPatrick Arlt | @patrickarlt
Slides: http://bit.ly/2lZU2lI
Code: http://bit.ly/2mkyqRN
<!-- 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="..." />
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.
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
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
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
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!