Building a Web Component in Polymer

James Milner

@JamesLMilner

jmilner@esriuk.com

Firstly a brief overview of Web Components

"Web components aim to provide the user a simple element interface that is rendered with complexity hidden under the hood."

<vine-video></vine-video>

Custom Elements

HTML Templates

Shadow DOM

HTML Imports

The Web Components Secret Sauce

webcomponents.js

"webcomponents.js is a set of polyfills built on top of the Web Components specifications. It makes it possible for developers to use these standards today across all modern browsers."

"Polymer is designed to make it easier and faster for developers to create great, reusable components for the modern web."

How I got started with Polymer

Feature Layer?

v1.0 -What's changed: House Keeping

Rebuilt from the ground up for speed! (~3x-4x faster)
Data binding is now one-way by default
No more whitespace in binding i.e. <p>{{variable}}</p>
Polyfill library reduced (web-components-lite.js)
Default is now Shady DOM not Shadow DOM

Shady DOM?

Polyfilling shadow DOM is hard
Shady DOM is a super-fast shim for shadow DOM that provides tree-scoping, but has drawbacks.

Why Shady DOM?

Provides enough tree-scoping for Polymer to act as if shadow DOM is available on all platforms.
It does this without compromising performance.
Greater support == growing mindshare
But... it leaks details and it introduces CSS scoping issues