Web Components

HTML goes brrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr

Let's go!

The Problem
Why do we even need Web Components?

Underpinning Technology
Core browser API's underlying Web Components

Demo
Converting a button to a Web Component

Let's go!

The Problem
Why do we even need Web Components?

Technology
Core browser API's underlying Web Components

Demo
Converting a button to a Web Component

Let's go!

The Problem
Why do we even need Web Components?

Technology
Core browser API's underlying Web Components

Demo
Converting a button to a Web Component

Let's go!

The Problem
Why do we even need Web Components?

Technology
Core browser API's underlying Web Components

Demo
Writing some Web Component code

Let's go!

The Problem
Why do we even need Web Components?

Technology
Core browser API's underlying Web Components

Demo
Converting a button to a Web Component

Let's go!

The Problem
Why do we even need Web Components?

Technology
Core browser API's underlying Web Components

Demo
Converting a button to a Web Component

Hello, who dis?

Sir Tim Berners-Lee

The creator of the mother-flippen Internet!

Still Kicking

http://info.cern.ch/hypertext/WWW/TheProject.html

The Goal

Document Sharing Platform of the Future

Web 3.0

Web 2.0

The Web as Platform

"What we need to remember, though, is that the Web, as we know it now, is a fleeting thing. [...] The Web will be understood not as screenfuls of text and graphics but as a transport mechanism, the ether through which interactivity happens."

Darcy DiNucci

Print Magazine (1999)

As Delivery Platform

Plurality of the Web

The Akward Phase

The Web

The Akward Phase

Humans

Frameworks

Umbrella Term

Custom Elements

HTML Templates

Shadow DOM

Web Components

Custom Elements

HTML Templates

Shadow DOM

Web Components

Custom Elements

HTML Templates

Shadow DOM

Web Components

Custom Elements

~~HTML Templates~~

Custom Elements

~~HTML Templates~~

Shadow DOM

ES Modules

~~Constructable Style Sheets~~

1. Custom Elements

3. ES Modules

2. Shadow DOM

<div>Hello World!</div>

Native Elements

<div>Hello World!</div>

document
	.createElement('div')
	.appendChild(document.createTextNode('Hello World'))

1. Custom Elements

3. ES Modules

2. Shadow DOM

Native Elements

<my-element>Hello World</my-element>

1. Custom Elements

3. ES Modules

2. Shadow DOM

Constructors

<my-element>Hello World</my-element>

1. Custom Elements

3. ES Modules

2. Shadow DOM

Constructors

1. Custom Elements

3. ES Modules

2. Shadow DOM

<my-element>Hello World</my-element>

Constructors

class MyComponent extends HTMLElement {
  constructor() { super() }
}

Custom Elements

It's all About the Hypen

1. Custom Elements

3. ES Modules

2. Shadow DOM

Shadow DOM

Yo Dawg, I heard you like DOM's?

1. Custom Elements

3. ES Modules

2. Shadow DOM

Old-school Iframes

The Golden Age of the Web

1. Custom Elements

3. ES Modules

2. Shadow DOM

Old-school Iframes

The Golden Age of the Web

1. Custom Elements

3. ES Modules

2. Shadow DOM

1. Custom Elements

3. ES Modules

2. Shadow DOM

Element Interface

Low-level Complexity

Shadow DOM

The OG DOM

1. Custom Elements

3. ES Modules

2. Shadow DOM

The OG DOM as Puppet Master

1. Custom Elements

3. ES Modules

2. Shadow DOM

Shadow DOM

The OG DOM as Puppet Master

1. Custom Elements

3. ES Modules

2. Shadow DOM

Shadow DOM

ES Modules

The Quest to be a Real Language

The Syntax

import HelloWorld from './hello-world.js';
import { Hello, World } from './hello-world.js';

1. Custom Elements

3. ES Modules

2. Shadow DOM

ES Modules

Turtles all the Way Down

project/
├── utilities/
│   ├── base-component.js
│   └── base-view-component.js
├── components/
│   ├── custom-button.js
│   ├── custom-icon.js
│   ├── mobile-menu.js
│   ├── user-card.js
│   └── data-table.js
└── views/
    ├── landing-page.js
    ├── user-settings.js
    └── list-of-items.js

1. Custom Elements

3. ES Modules

2. Shadow DOM