Web Components are a collection of four distinct technologies that come together to form a new way to package and reuse self-contained components built with HTML, CSS, and jаvascript. The four technologies that together make up Web Components are: Templates, Custom Elements, the Shadow DOM, and HTML Imports. Web Components offer a future of true reuse and encapsulation on the web, but until the various specifications that make up Web Components are implemented universally by browser vendors, you'll need to make use of polyfills.

In this Coffee Break Course, Envato Tuts+ instructor Dan Wellman will show you how to create Web Components with the X-Tag library. X-Tag is a small library, backed by Microsoft, that uses some of the same polyfills used by Google's Polymer framework to deliver a rich interface for rapid Web Component development. You'll learn how to make use of lifecycle events for a component, how to work with attributes, how to add methods, and how to handle events using X-Tag's simple API.

Previously, only browser vendors could create elements in this way. But imagine if you could use this same approach yourself with other types of content?

Take an image slideshow for example. Typically you would need a few rounds of nested divs bearing specific class names to handle wrapping the slideshow, wrapping each slide and adding captions and thumbnails. You'd also need to set any overall slideshow options for things like slide transition effects via some inline jQuery / j@vascript.

Only for V.I.P