Schalk Venter PRO
🔧 Front-end Development / 🎨 UI Design / 🌍 Social Good / ❤️ Destigmatising mental illness
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
1
2
3
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
1
2
3
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
1
2
3
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
1
2
3
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
1
2
3
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
1
2
3
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
Shadow DOM
Web Components
Custom Elements
HTML Templates
Shadow DOM
Web Components
Web Components
Custom Elements
HTML Templates
Shadow DOM
ES Modules
Constructable Style Sheets
Web Components
Custom Elements
HTML Templates
Shadow DOM
ES Modules
Constructable Style Sheets
Web Components
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
<script>
AMD
CommonJS
Browserify
ES Modules
1. Custom Elements
3. ES Modules
2. Shadow DOM
ES Modules
The Quest to be a Real Language
<script>
AMD
CommonJS
Browserify
ES Modules
1. Custom Elements
3. ES Modules
2. Shadow DOM
ES Modules
The Quest to be a Real Language
<script>
AMD
CommonJS
Browserify
ES Modules
1. Custom Elements
3. ES Modules
2. Shadow DOM
ES Modules
The Quest to be a Real Language
<script>
AMD
CommonJS
Browserify
ES Modules
1. Custom Elements
3. ES Modules
2. Shadow DOM
ES Modules
The Quest to be a Real Language
<script>
AMD
CommonJS
Browserify
ES Modules
1. Custom Elements
3. ES Modules
2. Shadow DOM
ES Modules
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.js1. Custom Elements
3. ES Modules
2. Shadow DOM
Web Components
By Schalk Venter
Web Components
HTML goes brrrrrrrrrrrr
