Web Components in Action

Chapter 7. Templating your content with HTML

This chapter covers

• Building on the concepts from (the now-deprecated) HTML Imports
• Document fragments
• The <template> tag
• Leveraging templates to replace HTML/CSS in a Web Component
• Loading templates from index.html or via a network request
• Named and unnamed slots

We’ve come a long way with Web Components so far! In addition to creating some moderately simple Web Component-based applications, we’ve gone fairly deep on some strategies for using HTML and CSS in our Web Components.

Of course, these strategies so far have revolved around storing markup in JS strings. Despite the great separation of concerns we get by storing our HTML/CSS in importable JS modules, as seen in chapter 6, there will ...