Chapter 12. Web Components and Aurelia

Web Components are encapsulated UI widgets (generally, custom elements) that you can easily drop into your web applications without the need for modifications to your application or third-party libraries like jQuery. For example, one option for embedding Google Maps in a website is to import the Google Maps Web Component, which includes all the dependencies needed to render a map to your page. Web Components are built on a set of relatively new APIs called the Web Components APIs, which are supported in most modern browsers. These APIs are an implementation of the Web Component Specifications established by the W3C. The Web Component Specifications aim to establish a framework-agnostic way of implementing common features that Web Components require, such as HTML templating and imports. In this chapter, we’ll explore what Web Components are, why you should care, and how you can use the Web Component APIs within your Aurelia applications.

12.1. Introducing Web Components

12.2. HTML Imports

12.3. HTML Templates

12.4. Custom elements

12.5. The Shadow DOM

12.6. Creating the my-books share-book component

12.7. my-books project status

Summary