Web.Dev 4: Web Components

Web Components can finally give your markup maintainability and componentization. We already have techniques to organize our back end code like c# and front end JavaScript, but markup until fairly recently seems to be out in left field enjoying the sunshine while we pull our hair out trying to make sense of our messy markup.

Web Components have been around in some form or another for a couple years now but are now just getting closer to a finalized version. Frameworks like Angular, Ember, and Ionic (Built on Angular) all use custom elements/components in their frameworks to allow you to easily create content and controls.

This episode of Web.Dev takes you through an intro of the pieces that make up Web Components and using Polymer (a polyfill library) to create a couple examples of Web Components.

[02:24] Web Component - The four pieces

[04:26] Draft Status

[06:37] Getting setup for the demo

[10:56] Custom Elements

[16:56] Templates and HTML Imports

[26:41] Shadow DOM and Styles

[34:44] Next Steps