HTML-модули без Javascript

Спецификация HTML позволяет нам создавать многократно используемые шаблоны с помощью элемента <template>. В этой статье мы рассмотрим, как создавать HTML-модули без JavaScript, используя новую функцию импорта.

Создание HTML-модуля

Чтобы создать модуль с помощью the<template>element, вы сначала определяете шаблон в своем HTML-файле. Например:

<template id="my-template">
  <div class="my-module">
    <h2>Module Title</h2>
    <p>Module content goes here.</p>
  </div>
</template>

В этом примере мы создали шаблон с идентификатором my-template. Содержимое шаблона должно быть допустимым HTML.

Импорт элемента шаблона

Используя функцию импорта, вы можете импортировать модуль на свою страницу, создав отдельный HTML-файл, содержащий код модуля:

<! - my-module.html →
<div class="my-module">
  <h2>Module Title</h2>
  <p>Module content goes here.</p>
</div>

В этом примере мы создали файл с именем my-module.html, который содержит наш компонент. Этот файл может находиться где угодно.

В вашем основном файле HTML создайте элемент a<link>element для обработки импорта нашего модуля.

<head>
  <link rel="import" href="my-module.html">
</head>

В этом примере мы добавили элемент <link> в <head> нашего HTML-файла, который указывает расположение файла нашего модуля.

Опять же, мы будем использовать <template>element, чтобы определить, куда будет вставлен импортированный модуль:

<body>
  <h1>My Page</h1>
  <template is="my-module"></template>
</body>

Когда страница загружается, браузер извлечет файл my-module.html и вставит его содержимое в the<template>element. Результирующий HTML будет выглядеть примерно так:

<body>
  <h1>My Page</h1>
  <div class="my-module">
    <h2>Module Title</h2>
    <p>Module content goes here.</p>
  </div>
</body>

Хотя это не идеальный метод модульной разметки, это надежный и официальный подход к созданию повторно используемых модулей без использования инструментов JS.

HTML-модули без Javascript