The Time for Vanilla Web Components has Arrived

The Time for Vanilla Web
Components has Arrived
Gil Fink
sparXys CEO, @gilfink

We all love <div> soup
3
Known website markup…

There’s an <element> for that

About Me
• sparXys CEO and senior consultant
• Microsoft MVP in the last 9 years
• Pro Single Page Application Development (Apress) co-author
• 4 Microsoft Official Courses (MOCs) co-author
• GDG Rishon and AngularUP co-organizer

Agenda
• The Problems We Faced
• Web Components APIs
• Templates
• Imports
• Shadow DOM
• Custom Elements

1. Undescriptive Markup
Markup Example

2. Poor Separation of Concerns
You want HTML, CSS and
JavaScript to work together
You end up with a mess

3. No Native Templates
• Store HTML in hidden DOM element and show it
• Use script tag as a template holder:
<script id=”myTemplate” type=”text/template”>
<div>
…
</div>
</script>

4. Bundling is Hard
• You want to bundle a complex component
The component includes HTML, CSS and JavaScript
how would you do that?
• Use a server side mechanism?
• Bundler? (Webpack/Browserify)

What if we could teach the
browser new elements?

Each Element Instance
• Will be a DOM element
• Creates its own DOM tree
• Can be accessed and manipulated using DOM functions or its own
API
• Is a JavaScript object
• Is this possible?

Web Components to the Rescue
• Natively-supported, standardized JavaScript components
• Some general goals:
Code Reuse Encapsulation
Separation of
Concerns
Composition Theming Expressive Semantic

The Web Components Standard
• Reusable DOM fragmentsTemplates
• Load HTML declarativelyImports
• DOM encapsulationShadow DOM
• Create your own elements
Custom
Elements

Web Components API Support
• We need Polyfills in some browsers

Setting The Environment
• We will use the webcomponents.js Polyfill
• A real world tested Polyfill
• Download:
• https://github.com/webcomponents/webcomponentsjs/
• Or install using your favorite package manager
• Make sure the Polyfill script runs first

Templates
• HTML element – template
• Can be used to instantiate document fragments
• Can wrap HTML, style tags and script tags
• No data binding support out of the box!
<template id=”myTemplate”>
<div>
…
</div>
</template>

Cloning a Template
• Select the template and extract its content
• Using its content property
• Use the importNode function to get the cloned content
• Only when the clone is appended to the DOM
• The style and JavaScript are executed
• Resources like images are retrieved from the server

Cloning a Template - Example
…
</template>
// check template support
if ('content' in document.createElement('template')) {
// get the template
let template = document.getElementById(‘myTemplate’);
// clone the template
let clone = document.importNode(template.content, true);
// use the clone
elm.appendChild(clone);
}

The Slot Element
• Placeholder inside a web component
• Lets you inject separate DOM trees inside a component
• Named slot is used to expose more then one slot in a component
• Can be partnered with template elements

Combining Slot and Template Elements
<div>
<slot name=“header"></slot>
<slot name="description"></slot>
</div>
</template>

Imports
• Load additional HTML documents
• Without using Ajax
• A new type of link tag
• Use the rel attribute with the import type:
<link rel=”import” href=”myImport.html”>

Imports and Bundling
• HTML Imports are intended to be used as packaging mechanism
• Enable to bundle a full component into one HTML file
• The HTML can include scripts and CSS styles
• The whole bundle can be retrieved in one single call

Imports and The DOM
• Importing a document doesn’t include it into the DOM
• It will parse it in memory and load all the additional resources
• Use the import property of the link tag:
let content = document.querySelector(‘link[rel=”import”]’).import;

Import Additional Notes
• Scripts running inside the import can reference the containing
document by calling document.currentScript.ownerDocument
• CORS constraints apply to documents imported from other domains

A Few Words About Script Modules
• Scripts that are treated as ECMAScript modules
• Module scripts don’t block the HTML parser
• Resembles script defer attribute
• Already implemented in most of the browsers
• Probably will replace the import standard
<script type=“module”>
import {someFunc} from './utils.js';
someFunc('Modules are pretty cool.');
</script>

Shadow DOM
• Encapsulate DOM parts
• The browser will know how to present those parts
• The browser won’t show the encapsulated parts in the source code
• Creates a boundary between the component and its user

The Problems Shadow DOM Tries to Solve
• Components/widgets encapsulation
• Style leakage
• Leaks from one component to another
• Leaks from imported 3th party library/framework
• Global DOM
• id or class attributes all over the place

Shadow DOM in The Browser
<video src="media/myVideo.mp4" controls></video>
<input type="date">

Show Shadow DOM Elements in
Chrome
Demo

Shadow DOM – Cont.
• Use the attachShadow function to wrap an element as a shadow root:
• Mode property:
• open - elements of the shadow root are accessible from the outside using
element.shadowRoot
• closed - denies any access to node(s) inside the shadow root
let host = document.getElementByIt(‘shadowDOMHost’);
let root = host.attachShadow({mode: 'open'});
root.innerHTML = ‘<div>Lurking in the shadows</div>’;

Styling Shadow DOM
• Shadow DOM can have inline styles
• Using :host, :host() and :host-context pseudo-classes
• ::slotted() pseudo-element
<div name="myElement">
<style>
:host {
border: 1px solid lightgray;
}
</style>
<template>...</template>
</div>

Custom Elements
• Enable to extend or create custom HTML elements
• Defined using the customElements.define function:
or extend an existing element:
let myInput = window.customElements.define(‘my-input’,
class x extends HTMLElement {…});
let myInput = window.customElements.define(‘my-input’,
class y extends HTMLInputElement {...});

Custom Elements – Naming
• You can create named elements (almost) any way you want:
• Same naming rules as other HTML tags
• There must be a dash (“-”) in the name
• To future-proof the name against the HTML standard
• To avoid naming collisions

Custom Elements – Usage
• Use the element in your DOM:
or use the createElement function:
<my-input></my-input>
let elm = document.createElement(‘my-input’);

Custom Element Life Cycle Events
• connectedCallback
• disconnectedCallback
• attributeChangedCallback
• adoptedCallback
class MyInput extends HTMLElement {
constructor() {
super();
// your initialization code goes here
}
connectedCallback() {…}
disconnectedCallback() {…}
attributeChangedCallback() {…}
adoptedCallback() {…}
}

Observing Attribute Changes
• First list all the observed properties
• Use the observedAttributes getter
• Wire the attributeChangedCallback
• Will be called for every attribute that changes
class MyInput extends HTMLElement {
constructor() {
super();
// your initialization code goes here
}
static get observedAttributes() {
return ['attrName'];
}
attributeChangedCallback(name, oldValue, newValue) {
…
}
}

customElements Registry
• Includes API to
• Define custom elements using the define function
• Get custom element definition using the get function
• Understand if a custom element is defined using the whenDefined function
• Useful to defer work until the elements are really defined

The Current State of Web Components
• Still not a recommendation (yet)
• Browser support:
http://caniuse.com/#search=web%20components
• Known web component libraries:
Polymer X-Tag Stencil Slim.js Skate.js

Summary
• Web Components are emerging standards that enable:
• Encapsulation
• Separation of Concerns
• Element portability
• And more
• They are still in development!

The Time for Vanilla Web Components has Arrived

More Related Content

What's hot (20)

Similar to The Time for Vanilla Web Components has Arrived (20)

More from Gil Fink (20)

Recently uploaded (20)

The Time for Vanilla Web Components has Arrived