The HTML and CSS Workshop

12. Web Components

Overview

By the end of this chapter, you will be able to create custom elements to use on a web page; encapsulate the structure and styles of a custom element with the Shadow DOM; create a simple-modal using HTML templates; and create and share your own web component. This chapter introduces the three technologies used to create web components – custom elements, the Shadow DOM, and HTML templates – and how they can be combined to make reusable components.

Introduction

In the previous chapter, we learned about the techniques we can use to ensure we are writing in a well-supported standard. In this chapter, we will use many of these techniques to create web components – bits of UI that we can safely share across multiple ...