Web components - A whirlwind tour
summary
Covers concrete Web Components pieces: HTML <template> (stable, parsed to a document fragment so DOM insertion is orders of magnitude faster than innerHTML), Shadow DOM (isolates styles and DOM but is still spec-in-flux and often behind flags), Custom Elements (createdCallback/attachedCallback, must use a dash in tag name, supports lifecycle and attributeChanged), and HTML Imports (synchronous loading and blocking today). Demonstrates a reusable filterable-list implemented as a custom element, and points to polyfills via webcomponents.js for older browsers.
AI-written summary · about
chapters (29)
- 0:00Start
- 1:49So let's talk about Web Components
- 5:09So how do we get to this?
- 5:51Semantic markup everywhere.... 3
- 12:47Sample: Filterable list (cont.)
- 15:20I know what you think...
- 15:36But... wouldn't this be great?
- 16:41Voila: Web Components!
- 18:15State of the art
- 19:09Template Element: What for?
- 19:37Template Element: Status
- 21:17Template Element: Here's how (cont.)
- 23:08Shadow DOM: What for?
- 23:41Shadow DOM: Status
- 25:16Shadow DOM: Here's how
- 26:59Custom Elements: What for?
- 27:31Custom Components: Status
- 28:48Custom Components: Here's how
- 29:48Custom Components (cont.)
- 30:22Custom Elements + Shadow DOM
- 31:47HTML Imports: What for?
- 32:03HTML Imports: Status
- 32:55HTML Imports: This is how it's used
- 33:11So.. how about the others?
- 34:59What makes a good web component?
- 35:44In summary: Browser support
- 36:14In summary: Standards
- 36:29Frameworks & Libraries
- 37:02Thank you!
related talks
36mWeb components - A whirlwind tour thru the future of the web
36mThe State of Web Components
44mWeb Components An Introduction to the Future
32mLet's talk about Web Components
51mBuilding web applications with Web Components
24mWeb Components: It's all rainbows and unicorns! Is it?
45mLet's Talk About Web Components
29mWhen to Use Web Components