Web Components & Shadow DOM

<template id="my-template">
  <style>
    .container { padding: 20px; }
  </style>
  <div class="container">
    <slot></slot>
  </div>
</template>

To create dynamic routing
To define reusable markup that isn't rendered immediately
HTML Templates (<template>) serve to define reusable markup that: 1) Is not rendered when the page loads, 2) Can be cloned and used multiple times, 3) Provides a way to declare fragments of DOM that will be used later, 4) Can include both HTML and CSS that will be used in components. The content inside a template tag is considered inert until it's cloned into a document.
To implement server-side rendering
To manage component state