Chapter 6. Markup managed

This chapter will keep building on what we’ve learned from previous chapters, especially the last one, where we learned about modules. So far, we’ve managed to create self-reliant Web Components that load their own dependencies, including other Web Components. With this, our index.html is minimal. Between this, learning to use attributes, and building our own component API in chapter 4, we essentially cleaned up our use of Web Components from the outside looking in.

We left off with a somewhat messy-looking component on the inside, however. Shoving lots of markup and CSS into the component’s innerHTML works well but isn’t very readable, especially the way we’ve been working with multiline strings. In this chapter, we’ll address this problem, and, in the end, we’ll have clean and organized components on the inside and out.

6.1. String theory

Strings are one of the most basic things in JS. You no doubt use them constantly in every aspect of web development. Why go over such a simple concept? The answer is that there is a new JS feature in ES2015 that greatly cleans up our Web Components.

So, what’s the big deal? Prior to ES2015, there were a couple different string syntaxes that did the same thing—double quotes and single quotes:

or

6.2. Using template literals

6.3. Importing templates

6.4. Template logic

6.5. Element caching

6.6. Smart templating

6.7. Updating the slider component

Summary