Template

The HTML template element <template> is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript.

MDN

Now

1. DIV
   - браузер попытается выполнить скрипты, загрузить медиа
2. script
   - XSS
   - экранирование
3. компиляторы (Mustache, hogan.js)
   - см. выше

Advantages

1. семантично
2. работа с DOM (не со строками)

Disadvantages

1. уступают идеи директивам (e.g. Angular)
2. уступают реализации в polymer

Shadow DOM

Magic of <content>

Advantages

1. инкапсуляция
2. замена iframe

!Note

1. link
2. css selectors

Custom elements

• must be like <x-my-tag/>
• have own scripting behaviour
• have own API
•  have lifecycle callbacks
  - created
  - attached
  - detached
  - attributeChanged

Advantages

1. семантично
2. Custom Elements
   + Shadow DOM
   = independent widget
3. удобочитаемый код на высоком уровне

HTML imports

...

Features

• only one load

Disadvantages

• minify resources