Web Components - introduction

Custom Elements
The Custom Elements specification lays the foundation for designing and using new types of DOM elements.
Shadow DOM
The shadow DOM specification defines how to use encapsulated style and markup in web components.
ES Modules
The ES Modules specification defines the inclusion and reuse of JS documents in a standards based, modular, performant way.
HTML Template
The HTML template element specification defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.

WHO'S USING THIS STUFF & WHY?

Workshop - Day 1

How they work

First an example- Login component
components | Applications

Advantages

Built on HTML, JavaScript & CSS
Complement HTML Tags
Simple to create and use - all components are created equal
Reduced code base & consistent look and feel
Smart Components - do one thing and do it well
No dependencies - communicate via Pub/Sub
Pick your own backend

Workshop - Day 2

Challenges of- a simple app

A Component Library - Cloudable

A watered down version of Web Components (all but shadow DOM)
Components Playground - play begore you choose
Tools
- Common Styles
- A component template - blank component
- Maker and Packer

Workshop - Day 3

Files & Folders- tools you need to get started

A couple of hands and a smart text editor - I use Emacs
Installed NodeJS - you need to install node-sass

Hands on- creating a panel component

Workshop - Days 4 & 5

Hands on panel creating- continued

Back to our simple appl challenge topic

Final thoughts

Need a few Volenteers :)