Schalk Venter
🔧 Front-end Development / 🎨 UI Design / 🌍 Social Good / ❤️ Destigmatising mental illness
FEDSA
FEDSA
FEDSA
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
"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
The Akward Phase
The Web
The Akward Phase
Humans
Custom Elements
HTML Templates
Shadow DOM
Web Components
Umbrella Term
Custom Elements
HTML Templates
Shadow DOM
Web Components
Shadow DOM
Web Components
HTML Templates
Custom Elements
<div>Hello World!</div>
Native Elements
const element = document.createElement('div')
element.appendChild(document.createTextNode('Hello World'))
console.log(element instanceof HTMLElement) // true
document.body.appendChild(element)Native Elements
<div>Hello World!</div>
<my-element>Hello World</my-element>Element Classes
console.log(element instanceof HTMLElement) // true<hello-world>Look mom, no framework!</hello-world>Constructors
const input = createRef<HTMLInputElement>()
<hello-world>I'm a real HTML Element!</hello-world>
// console.log(element instanceof HelloWorld) // trueConstructors
class HelloWorld extends HTMLElement {
constructor() { super() }
}
customElement.define('hello-world', HelloWorld)const input = createRef<HTMLInputElement>()
Custom Elements
Remember the Hypen
Shadow DOM
Yo Dawg, I heard you like DOM's?
Old-school Iframes
The Golden Age of the Web
Old-school Iframes
The Golden Age of the Web
Shadow DOM
The OG DOM
The OG DOM as Puppet Master
Shadow DOM
The OG DOM as Puppet Master
Shadow DOM
const template = document.createElement("template");
template.innerHTML = `
<style>
p { border: 1px solid magenta }
</style>
<h2>Encapsulation Time!</h2>
<p>
I should be the only border,
and not be blue
</p>
<slot></slot>
`;
class HelloWorld extends HTMLElement {
inner = this.attachShadow({ mode: 'closed '})
constructor() { super() }
onConnectedCallback() {
super();
const content = template.content.cloneNode(true);
this.inner.appendChild(content);
}
}
customElement.define('hello-world', HelloWorld)<style>
p {
color: blue;
}
</style>
<h1>Example Page</h1>
<p>I should be blue</p>
<hello-world></hello-world>
<hello-world>
<h2>I'm inside</h2>
<p>But I'm also blue</p>
</hello-world>
<p>I should also be blue</p>
Release the VS Code
React 19 & Web Components
By Schalk Venter
React 19 & Web Components
HTML goes brrrrrrrrrrrr
