Let’s take the example of overwriting node--teaser.html.twig. The traditional approach (in Drupal 7) was to copy the node-template found from core in to our theme.

This has the problem that each custom template wasn't considering changes from other template-files. And it is also goes against the DRY-principle.

No longer! If we have 2 different templates that both have node.html.twig as a base, then we should respect the custom things defined in the base node.html.twig. We can do this by using {% extends %}.

An example

node
node
Twig Created with Sketch.
node.html.twig
node--full
Twig Created with Sketch.
node--full.html.twig
{% extends 'node.html.twig' %}
node--teaser
Twig Created with Sketch.
node--teaser.html.twig
{% extends 'node.html.twig' %}

The templates that extend, will contain the same markup as the template that they are extending from.

If you were to change some attributes like classes on node.html.twig. The templates that are extending will automatically get that change too!

When overwriting a template, you won't change each line in that template, often you only want to change a few lines. To accomplish that, we use Twig-blocks!