Future CSS in Web Components
summary
Web Components promise real encapsulation: create a shadow root with createShadowRoot and inject markup that the browser hides today (video controls are an example), use <template> inert and HTML imports to share fragments, register custom elements (vunda-bar style) with a required hyphen, and expose styling via var(--name) custom properties plus the part attribute for selective styling. Chrome Canary, Opera, Safari flags and Firefox nightly already implement pieces, and the Polymer polyfill both ships working widgets and shapes the standard.
AI-written summary · about
chapters (24)
- 0:00Start
- 1:41Before we start
- 6:01Shadow root
- 6:35Shadow DOM
- 7:30The problem
- 9:19Encapsulation in HTML
- 9:39Better encapsulation
- 10:06Web Components the biggest change to web
- 10:49Mustache & Handlebars
- 12:12The template element
- 12:30The content object
- 14:06Templates
- 15:21Custom Elements
- 18:29Scoped styles
- 19:42Shadow scope
- 20:02The shadow boundary
- 20:51applyAuthor Styles
- 21:51Pseudo-elements
- 22:32The part attribute
- 23:52Custom properties
- 27:15The decorator element
- 28:00Decorators
- 28:40Browser support
- 31:19Useful links
related talks
42mThe Good, The Bad, The Web Components
24mWeb Components
46mWhat ever happened with Web Components?
19mWeb Components
36mThe State of Web Components
29mBreak out from the framework: Web Components to the rescue
36mWeb components - A whirlwind tour thru the future of the web
51mBuilding web applications with Web Components