Web Components

on YouTube ↗16m

" summary

Demonstrates how to register a custom element with document.registerElement (name must include a hyphen), use the createdCallback and attributeChangedCallback to initialize and react, and attach a shadowRoot to hide internal markup and scope styles; shows content distribution via the content/select element and the part attribute for limited styling hooks. Recommends testing in Chrome Canary with experimental web platform flags and mentions Polymer, X-Tag and Brick polyfills and component sets.

AI-written summary · about

" chapters (7)

1. 0:00Mark Dalgleish WEB COMPONENTS
2. 1:16Components Today
3. 8:29Custom Elements
4. 10:27Shadow DOM
5. 11:50Encapsulated Styles
6. 14:43Just the beginning
7. 15:44Open the console and experiment

" related talks

• 36mThe State of Web ComponentsAna Cidre · CityJS Conference 2020
• 36mECMAScript 6 & Web ComponentsBrian LeRoux · GOTO Chicago 2015
• 32mFuture CSS in Web ComponentsPeter Gasston · CSSConf EU 2013
• 59mIntroduction to Web ComponentsHoracio Gonzalez · DevFest Nantes 2014
• 51mBuilding web applications with Web ComponentsMartin Splitt · Voxxed Days Ticino 2017
• 24mWeb ComponentsDivya Manian · JSConf EU 2012
• 41mAccessibility of Web ComponentsMarcy Sutton Todd · Inclusive Design 24 2014
• 42mWeb components and the future of web developmentVarunkumar Nagarajan · Meta Refresh 2013