Polymer 3.0 by Michele Gallotti

Polymer 3.0
A simple Polymer 3.0 project structure

Copyright 2011 - 2018, ThinkOpen S.r.l.
What’s Polymer
3.0?
Polymer 3.0 is the latest version of the
Polymer library for building web
components. It is developed by
Google.
For docs and resources visit
https://www.polymer-project.org/

Basics

Basics
What is a Web Component?
Web components are a set of web platfor
APIs that allow you to create new custom
reusable, encapsulated HTML tags to use
web pages and web apps. Custom
components and widgets build on the We
Component standards, will work across
modern browsers, and can be used with a
JavaScript library or framework that work
with HTML. [1]
[1] https://www.webcomponents.org/introduction

Basics
What is a Custom Element?
Custom elements provide a component model for
the web. The custom elements specification
provides:
● A mechanism for associating a class with a
custom element name.
● A set of lifecycle callbacks invoked when an
instance of the custom element changes
state (for example, added or removed from
the document).
● A callback invoked whenever one of a
specified set of attributes changes on the
instance.

What is a Customer Element?
<html>
<head></head>
<body>
<my-custom-element></my-custom-element>
</body>
</html>
export class MyCustomElement extends PolymerElement {
...
}
customElements.define('my-custom-element',
MyCustomElement);
<div class="MyElement">
<div class="MyElement__title"></div>
<div class="MyElement__body"></div>
</div>
<html>
<head></head>
<body>
#ShadowDOM
<div class="MyElement">
<div class="MyElement__title"></div>
<div class="MyElement__body"></div>
</div>
</body>
</html>

constructor
Custom Element Lyfecycle
connectedCallback
disconnectedCallback
attributeChangedCallback

constructor
Custom Element Lyfecycle
connectedCallback
disconnectedCallback
attributeChangedCallback
ready

Basics
What is the Shadow DOM?
The DOM a component author
writes. Shadow DOM is local to the
component and defines its
internal structure, scoped CSS,
and encapsulates your
implementation details. It can also
define how to render markup
that's authored by the consumer
of your component.

<div>
#shadow-root
<style>...</style>
<slot name="icon"></slot>
<span id="wrapper">
<slot>Button</slot>
</span>
</div>
A shadow root is a document fragment that gets attached to a “host” element. The act of attaching a shadow root is how the element
gains its shadow DOM.
let div = document.createElement('div');
let shadowRoot = header.attachShadow({mode: 'open'});

➢ DOM encapsulation
➢ Scoped CSS
➢ Composition
➢ Simplifies CSS

<better-button>

<img src="gear.svg" slot="icon">
<span>Settings</span>
</better-button>
#shadow-root
<style>...</style>
<slot name="icon"></slot>
<span id="wrapper">
<slot>Button</slot>
</span>
<better-button>
#shadow-root
<style>...</style>
<slot name="icon">
<img src="gear.svg" slot="icon">
</slot>
<span id="wrapper">
<slot>
<span>Settings</span>
</slot>
</span>
</better-button>
Example by: https://developers.google.com/web/fundamentals/web-components/shadowdom

Example by: https://developers.google.com/web/fundamentals/web-components/shadowdom
#shadow-root
<div id="tabs">
<slot id="tabsSlot" name="title"></slot>
</div>
<div id="panels">
<slot id="panelsSlot"></slot>
</div>
<fancy-tabs>
<button slot="title">Title</button>
<button slot="title" selected>Title 2</button>
<button slot="title">Title 3</button>
<section>content panel 1</section>
</fancy-tabs>
<fancy-tabs>
#shadow-root
<div id="tabs">
<slot id="tabsSlot" name="title">
<button slot="title">Title</button>
<button slot="title" selected>Title 2</button>
<button slot="title">Title 3</button>
</slot>
</div>
<div id="panels">
<slot id="panelsSlot">
</slot>
</div>
</fancy-tabs>

Basics
How Polymer 3.0 handles and
fires events?
Elements use events to communicate state
changes up the DOM tree to parent
elements. Polymer elements can use the
standard DOM APIs for creating,
dispatching, and listening for events.
Polymer also provides annotated event
listeners, which allow you to specify event
listeners declaratively as part of the
element's DOM template

How Polymer 3.0 handles and fires events?
<multiselection-component(data='{{convertFromTableToMultiselection(config.table)}}' on-checked-
box='onCheckedBox')></multiselection-component>
(this as any).dispatchEvent(new CustomEvent('checked-box', {detail: {name: e.currentTarget.name, checked:
e.currentTarget.checked}}));
(this as any).dispatchEvent( new CustomEvent( 'on-change-page', <CustomEventInit> {bubbles:true,
cancelable:true, composed: true, detail: {}} ) );
(this as any).addEventListener('on-change-page', e => {
e.stopPropagation();
});

Basics
Observers
Observers are methods invoked
when observable changes occur to
the element's data.

Observers
static get observers() {
return [
'checkList(data.*)',
'getArraySize(array.length)',
'checkArray(array.splices)',
'isChange(data.change)'
]
}
static get properties() {
return {
configuration: {
type: Object,
observer: 'drawChart'
},
data: {
type: Object,
observer: 'drawChart'
}
};
}

Basics
Data Binding
A data binding connects data from
a custom element (the host
element) to a property or attribute
of an element in its local DOM (the
child or target element). The host
element data can be a property or
sub-property represented by a
data path, or data generated
based on one or more paths.

Data Binding
<table-component(data='[[data.table]]' config='{{config.table}}')></table-component>
<multiselection-component(data='{{convertFromTableToMultiselection(config.table)}}')></multiselection-component>
One-way Two-way

Polyfill
In web development, a polyfill is code that
implements a feature on web browsers that
do not support the feature. Most often, it
refers to a JavaScript library that
implements an HTML5 web standard, either
an established standard (supported by
some browsers) on older browsers, or a
proposed standard (not supported by any
browsers) on existing browsers. Formally, "a
polyfill is a shim for a browser API".[1]
[1] Wikipedia EN

Polymer-cli
Polymer CLI is the official command line tool
for Polymer projects and Web Components.
It includes a build pipeline, a boilerplate
generator for creating elements and apps, a
linter, a development server, and a test
runner.[1]
[1] https://polymer-library.polymer-project.org/3.0/docs/tools/polymer-cli

The code

Basic structure code:
https://github.com/Darbiel/polymer3-basic-typerscript-pug-project
Workshop example code:
https://github.com/Darbiel/polymer3-ts-workshop
Sources for the example

Polymer 3.0 by Michele Gallotti

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

Similar to Polymer 3.0 by Michele Gallotti

Similar to Polymer 3.0 by Michele Gallotti (20)

More from ThinkOpen

More from ThinkOpen (20)

Recently uploaded

Recently uploaded (20)

Polymer 3.0 by Michele Gallotti

Editor's Notes