Long HTML strings become awkward when every line needs a backslash or a `+`. A template literal uses backticks (`) so markup can span lines and remain indented much like HTML in a page. This makes HTML and CSS easier to read when they are assigned to a Web Component’s `innerHTML`. section 6.1 section 6.0
Listing 6.3. Using the backtick to enclose HTML strings
this.innerHTML = `<form> #1
<div>
<label for="example">Let's submit some text</label>
<input id="example" type="text" name="text">
</div>
<div>
<input type="submit" value="Send">
</div>
</form>`;
The form keeps its line breaks without the string-continuation syntax used in the preceding examples. section 6.1
Inside a template literal, `${...}` inserts the value of an expression. For a business card, `${first_name}`, `${title}`, and `${email}` mark the text that will vary. You can sketch and style the card as ordinary HTML first, although a browser viewing that HTML directly will display the placeholder syntax rather than replace it. section 6.2 section 6.8
Listing 6.8. Defining our template module
export default {
render(props) {
return `${this.html(props)}
${this.css(props)}`; #1
},
html(p) { return ``; }, #2
css(p) { return ``; } #3
}
A separate JavaScript module can hold `html` and `css` functions; its `render` function combines their returned strings for the component. section 6.3
An interpolation need not be a single variable. A business-card customizer calls an `options` function inside its markup for both a logo selector and a background selector. The function turns each supplied choice into an `<option>` and returns the completed `<select>`. Passing different lists reuses the same generation logic. section 6.4
Listing 6.11. Function to convert an array of choices to menu options
options(list) {
let choices = ``;
for (let c = 0; c < list.length; c++) { #1
choices += `<option value="${list[c].uri}">${list[c].name}</option>`; #2
}
return `<select>${choices}</select>`; #3
}
The helper builds option strings with interpolated values and names, then inserts them into a select string. section 6.4
Keeping HTML and CSS in JavaScript is an option, not a requirement. HTML `<template>` elements offer another route when interchangeable layouts or contributors who do not work in JavaScript matter more. Tagged templates and lit-html are further templating options beyond the basic literal. section 7.6 section 6.8
