We're sorry, but the polymerosaurus can't find the page you were looking for.

Not found.

ENCAPSULATED

CONFIGURABLE

COMPSABLE

PROGRAMMABLE

<video width="320" height="240" controls>
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

We're sorry, but the polymerosaurus can't find the page you were looking for.

Not found.

WebComponents

WebComponents

CUSTOM ELEMENTS

HTML IMPORTS

SHADOW DOM

TEMPLATES

• Isolated DOM
• Scoped CSS
• Composition.
• Simplifies CSS 
• Productivity​ 

WebComponents V0

var MyElement = document.registerElement('my-element');


const header = document.createElement('my-element');
const shadowRoot = header.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>';

WebComponent V1

class MyElement extends HTMLElement {
    constructor() {
        super(); // always call super() first in the ctor.

        // Attach a shadow root to <app-drawer>.
        const shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.innerHTML = `
          <h1>Hello Shadow DOM</h1>
        `;
    }
}

window.customElements.define('my-element', MyElement);

customElements.define('x-focus', class extends HTMLElement {
  constructor() {
    super(); // always call super() first in the ctor.

    const root = this.attachShadow({mode: 'open', delegatesFocus: true});
    root.innerHTML = `
      <style>
        :host {
          display: flex;
          border: 1px dotted black;
          padding: 16px;
        }
      </style>
      <div>Clickable Shadow DOM text</div>
      <input type="text" placeholder="Input inside shadow dom">`;

    // Know the focused element inside shadow DOM:
    this.addEventListener('focus', function(e) {
      console.log('Active element (inside shadow dom):',
                  this.shadowRoot.activeElement);
    });
  }
});
</script>

<link rel="import" href="../x-focus.html">


<x-focus></x-focus>

<script>

C0D1NG_TH3_W0RLD

Elements

Polymer

Platform

Elements

Polymer

Polyfills

Elements

Polymer

Platform

Overview

Polymer is a lightweight library built on top of the web standards-based Web Components API's, and makes it easier to build your very own custom HTML elements. Creating re-usable custom elements - and using elements built by others - can make building complex web applications easier and more efficient. By being based on the Web Components API's built in the browser (or polyfilled where needed), Polymer elements are interoperable at the browser level, and can be used with other frameworks or libraries that work with modern browsers.

Among many ways to leverage custom elements, they can be particularly useful for building re-usable UI components. Instead of continually re-building a specific navigation bar or button in different frameworks and for different projects, you can define this element once using Polymer, and then reuse it throughout your project or in any future project.

Polymer provides a declarative syntax to easily create your own custom elements, using all standard web technologies - define the structure of the element with HTML, style it with CSS, and add interactions to the element with JavaScript.

Polymer also provides optional two-way data-binding, meaning:

1. When properties in the model for an element get updated, the element can update itself in response.
2. When the element is updated internally, the changes can be propagated back to the model.

Polymer is designed to be flexible, lightweight, and close to the web platform - the library doesn't invent complex new abstractions and magic, but uses the best features of the web platform in straightforward ways to simply sugar the creation of custom elements.

In addition to the Polymer library for building your own custom elements, the Polymer project includes a collection of pre-built elements that you can drop on a page and use immediately, or use as starting points for your own custom elements.

Elements

Polymer

Platform

 "The library doesn't invent complex new abstractions and magic, but uses the best features of the web platform in straightforward ways to simply sugar the creation of custom elements."

Text

Text

Elements

Polymer

Platform

        // Extend Polymer.Element base class
        class AppView extends Polymer.Element {
            static get is() {
                return 'app-view';
            }

            static get config() {
                return {
                    properties: {
                        title: String,
                        users: Array
                    }
                };
            }

            handleTap(e) {
                e.preventDefault();
                document.dispatchEvent(new CustomEvent('user-selected', {detail: {user: e.currentTarget }}));
            }
        }

        customElements.define(AppView.is, AppView);
    </script>
</dom-module>

<dom-module id="app-view">
    <template>
        <style>{...}</style>

        <div class="title">{{title}}</div>
        <dom-repeat items="{{users}}">
            <div id="{{item.id}} class="view" on-tap="handleTap">
                <h1>{{item.name}}</h1>
            </div>
        </dom-repeat>
    </template>

    <script>

Mutation Observers

 Pointer Events

Web Animations

 and much more...

non-trivial polyfills

degraded performance

 HTTP/2 support