Michele Gallotti presenta la struttura di un progetto base di Polymer 3.0, insieme a PUG e Typescript e illustrerà le basi concettuali di Polymer 3.0 con un semplice widget.
Le slide sono rivolte a chiunque voglia conoscere Polymer 3.0 e le sue potenzialità.
2. 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/
4. Copyright 2011 - 2018, ThinkOpen S.r.l.
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
5. Copyright 2011 - 2018, ThinkOpen S.r.l.
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.
9. Copyright 2011 - 2018, ThinkOpen S.r.l.
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.
10. Copyright 2011 - 2018, ThinkOpen S.r.l.
What is the Shadow DOM?
<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'});
11. Copyright 2011 - 2018, ThinkOpen S.r.l.
What is the Shadow DOM?
➢ DOM encapsulation
➢ Scoped CSS
➢ Composition
➢ Simplifies CSS
12. Copyright 2011 - 2018, ThinkOpen S.r.l.
What is the Shadow DOM?
<better-button>
<!-- the image and span are better-button's light
DOM -->
<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
14. Copyright 2011 - 2018, ThinkOpen S.r.l.
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
15. Copyright 2011 - 2018, ThinkOpen S.r.l.
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();
});
16. Copyright 2011 - 2018, ThinkOpen S.r.l.
Basics
Observers
Observers are methods invoked
when observable changes occur to
the element's data.
18. Copyright 2011 - 2018, ThinkOpen S.r.l.
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.
20. Copyright 2011 - 2018, ThinkOpen S.r.l.
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
21. Copyright 2011 - 2018, ThinkOpen S.r.l.
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
23. Copyright 2011 - 2018, ThinkOpen S.r.l.
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
Hinweis der Redaktion
constructor = Called when the element is upgraded. The constructor is a logical place to set default values, and to manually set up event listeners for the element itself.
connectedCallback = Called when the element is added to a document. Can be called multiple times during the lifetime of an element. For event listener too
attributeChangedCallback = Called when any of the element's attributes are changed, appended, removed, or replaced.
disconnectedCallback = Called when the element is removed from a document. Can be called multiple times during the lifetime of an element.
ready = Called during Polymer-specific element initialization. Called once, the first time the element is attached to the document.
The events fired can reach only the first next layer. If you want to fire an event over the first layer, you can use bubbling