Intro to Web Components & Polymer Workshop

on YouTube ↗01h 48m

" summary

Step-by-step build of a small PWA using Web Components and Polymer 3 shows real code: ES6 module imports, polymer CLI/npm, polymer serve, polymer lint, and Google Maps custom elements (map, marker, directions) wired with attributes and data binding to produce live maps and route modes; a custom WC toast element is created from scratch using shadow DOM, slots, attributes (duration) and open/close methods, then reimplemented with lit-element for compact data binding. Comcast reports this pattern runs in production for millions of users.

AI-written summary · about

" chapters (12)

1. 0:00Introduction to Workshop
2. 2:00Web Component Fundamentals
3. 7:15Browser Support and ES6
4. 9:29The Polymer Project
5. 12:20Google Maps Code Lab
6. 26:47Building with Maps and Data
7. 39:01Data Binding and UI Design
8. 50:43Custom Component Development
9. 54:02Shadow DOM and Encapsulation
10. 1:11:31Component Interactivity
11. 1:18:54LitElement and Frameworks
12. 1:24:35Production, Testing, and Q&A

" related talks

• 01h 00mAn Introduction to Web Components and PolymerJeff Posnick · Philly ETE 2016
• 30mBuilding a PWA using PolymerAshrith Kulai · JSFoo 2017
• 28mPolymer and Web ComponentsTaylor Savage · Google Developer Days India 2017
• 39mProgressive web apps with PolymerMartin Splitt · JavaScript fwdays'17
• 19mWeb ComponentsJeff Tapper · FITC Web Unleashed 2014
• 41mComponents Approach to Building Web AppsVinci Rufus · Meta Refresh 2015
• 51mBuilding web applications with Web ComponentsMartin Splitt · Voxxed Days Ticino 2017
• 30mPolymer + Webpack: Bringing Web Components to a Framework Near YouChad Killingsworth · Polymer Summit 2017