Web componentsby����������� ������������������  Dmitry����������� ������������������  Bakaleinik

May����������� ������������������  2015

dmitry.bakaleinik@gmail.com����������� ������������������  @demongloom

Meet the new W3C heroes

Web Components

In 2013-2014 W3C presented a set of new HTML improvements called Web Components.

Web Components is a standard that is getting really popular these days, Browser support is getting better and we can use libraries such as Polymer, XTags and Bosonic. In addition, Angular 2 will introduce support for Web Components, Shadow DOM, Templating, etc. It’s important to understand all these concepts in order to adopt faster new frameworks and libraries.

Encapsulate and share

In a nutshell, Web Components allow us to encapsulate and share reusable widgets.

The main idea is to been able to bundle markup and styles to create custom components,

all the code will be hidden from the outside world, the markup and the styles will be isolated.

Why?

Web in 1990s, HTML pages were lean and simple

HTML and the World Wide Web started in the early 1990's.

Version 1.0 of the first popular, dominant commercial browser,

Netscape Navigator, was released in December 1994.

It supported very simple HTML, which included simple styling and simple forms for data entry.

Later versions in 1995 added tables, cookies, and very early JavaScript. Microsoft released its first browser in 1995.

At this point, extremely rich applications could be written in C++, Visual Basic, or any of many programming systems.

HTML was very lean, with very basic data display and entry.

The HTML could be mastered by people who were not good programmers or even programmers at all

You could make something that looked "OK" pretty quickly

HTML tag was an alphabet for web

First of all we are beginning to write site code from HTML and not from js/css.

HTML Elements are encapsulated

HTML Elements are configurable

Even more configuration!

HTML Elements composition

HTML Elements are programmable

HTML%

CSS%JavaScript%

Content&Structure&Seman-c&

Style&Anima-on&

Behavior&Interac-on&

Seman&c(Content(Structure(Style(tags(

Silly(Style(Anima&on(

Behavior(Interac&on(Anima&on(

Content(crea&on(

jQuery

Mootools

Prototype

Dojo

ExtJS

Web in 2000s and until now, rapid growth of UI frameworks

Backbone

AngularJS

JavaScript dominates the

web’s programming landscape.

HTML%

CSS%JavaScript%

Today

Instead writing HTML, we’re writing more

JavaScript.

What is broken in the web today?

Back to HTML

What we’re used before

Why not just mega-button?

The component model for Web

Custom Elements

HTMLTemplates

HTMLImports

ShadowDOM

Let authors define their own elements, with new tag names and new script interfaces.

Defines how templates and custom elements are packaged and loaded as a resource.

Define chunks of markup that are inert but can be activated for use later.

Web components are set of emerging standards

that allow developers to extend html

Can I use web components?

Templates ✓ ✓ ✓ ✓ ✓ ✗

Shadow DOM ✓ ✓ ✓* ✓ ✓ ✗

Custom Elements ✓ ✓ ✓* ✗ ✗ ✗

Imports ✓ ✓ ✓* ✗ ✗ ✗

Let authors define their own elements, with new tag names and new script interfaces.

Custom Elements

Definition

So for example, <x-tags>, <my-element>, and <my-awesome-app>

are all valid names, while <tabs> and <foo_bar>

are not.

Inheritance

Lifecycle

Attributes

Styling

no����������� ������������������  dot����������� ������������������  ����������� ������������������  in����������� ������������������  selector

http://jsfiddle.net/VHn4K/3/embedded/result,html,js,css/presentation/

Defines how templates and custom elements are packaged and loaded as a resource.

HTML Imports

Custom element html filemega-button.html

Importing custom element

Detecting broken elements

Define chunks of markup that are inertbut can be activated for use later.

Template

The <template> element declares fragments of HTML that can be cloned and inserted

by script

In a rendering, the template element represents nothing

Template declaration

Using a template

Encapsulates a DOM subtree for more reliable composition of user interface elements.

Shadow DOM

The fundamental problem that makes widgets built out of

HTML and JavaScript hard to use:

The DOM tree inside a widget isn’t encapsulated from

the rest of the page

Your document stylesheet might accidentally apply

to parts inside the widget

Your JavaScript might accidentally modify

parts inside the widget

Your IDs might overlap with IDs

inside the widget and so on

Shadow DOM addresses the DOM tree

encapsulation problem

With Shadow DOM, elements can get a new kind of node

associated with them

This new kind of node is called a shadow root

An element that has a shadow root associated with it is called a shadow host

The content of a shadow host isn’t rendered; the content of the shadow root is rendered instead

The content of a shadow host isn’t rendered; the content of the shadow root is rendered instead

Shadow DOM usage

Thanks!