Приветствую коллеги. Данная статья является третьей и последней статьей в серии статей о веб-компонентах.Первые две статьи доступны по ссылкам:
В данной статье речь пойдет о элементе а также об HTML импортах.
HTML Templates элемент
Элемент представляет собой инструмент, позволяющий хранить контент на стороне клиента без его рендеринга на страницу, однако с возможностью его отображения в процессе исполнения посредством JavaScript.
Содержимое элемента при парсинге страницы обрабатывается исключительно в части валидации содержимого, но без его рендеринга (согласно спецификации, при рендеринге этот элемент ничего не представляет). Содержимое элемента можно клонировать и вставлять в документ из скриптов, что и используется как самостоятельно для шаблонизации так и при создании веб-компонентов.
Содержимое
К содержимому , как и к любому узлу, не имеющему браузерного контекста, не применимы никакие требования соответствия, кроме требований к правильности HTML и XML синтаксиса. Это означает, что в содержимом шаблона можно, например, указать элемент img не указав значение атрибутов src и alt, таким образом:
однако, вне элемента такой синтаксис валидным не является. При этом пропуск закрывающего тега
был бы нарушением HTML синтаксиса и не является допустимым для содержимого .
Все элементы указанные внутри тега в html коде не являются его дочерними элементами.
Бразуеры при создании элемента создают DocumentFragment чьим документом является т.н. approptiate template contents owner document, определяемый по этому алгоритму, документа в котором указан и указывает значением свойства .content созданный DocumentFragment.
То есть свойство .content у элемента template содержит DocumentFragment, и элементы, которые в html коде были указаны внутри тегов являются дочерними элементами именно этого DocumentFragment.
При этом элементу , как и любому другому, можно добавить дочерние элементы (appendChild()), но это будет считаться нарушение модели содержимого шаблона.
Клонирование шаблона
При клонирования содержимого шаблона важно помнить, что первый аргумент в .cloneNode([deep]) или второй в .importNode(externalNode, deep) передавать обязательно надо (согласно спецификации, если аргумент не будет передан, дальнейшее выполнение происходить не должно).
Кстати, да, не смотря на то что большинство примеров используют именно .cloneNode(), использование .importNode() тоже возможно. Разница только в том, когда документ обновится (для .cloneNode() — после вызова appendChild(); для .importNode() — после клонирования).
Использование шаблонов действительно очень простое. Я продолжу пример компоненты таб, с кодом которых я работала в примерах предыдущих статей.
Начинать я буду с того, что создам в html разметке два элемента и перенесу в них ту разметку, что была в методе .render() классов TabNavigationItem и TabContentItem (я также изменила некоторые стили но на функциональность это не влияет):
В конструкторе каждого класса я сохраню свойство template. Для TabNavigationItem это будет:
В этом примере оба шаблона указаны в html, что выглядит громозким и не есть гуд. Это плавно переводит нас к теме:
HTML импорты
Импорты представляют собой HTML документы которые подключены в качестве внешних ресурсов другим HTML документом. Система взаимоотношений между документами хорошо описана в черновике спецификации и не является предметом данной статьи.
Общая схема видна на изображении:
.
Для того чтобы реализовать импорты был добавлен новый тип в HTML link types (значения атрибута rel).
Слово import, указанное в значение атрибута rel элемента собственно и создает ссылку к импортируемому ресурсу (дефолтным типом ресурса является text/html).
У элемента может присутствовать атрибут async.
Расширения, предлагаемые черновиком спецификации предлагаются в АПИ HTMLLinkElement: добавляется свойство import, доступное только для чтения и содержащее импортируемый документ.
Свойство может содержать значение null в двух случаях: когда не представляет import или не находится в документе.
В спецификации отдельно указано что один и тот же объект должен будет возвращаться всегда.
В контексте импортов, есть так называемый мастер-документ (master document), которым является тот документ, который импортирует ресурсы одновременно не являясь при этом чьим либо импортируемым ресурсом.
ContentSecurityPolicy такого документа должна ограничивать все импорты. Так, если Content Security Header Field поставлен в значение импорта, браузер должен принудительно исполнять политику именно мастер-документа к импортируемому документу.
На практике
Для компонента таб, я создаю папку templates. В ней я создам два файла, в которые я перенесу разметку компоненты.
В файла index.html я импортирую шаблоны:
Элементам я добавляю id атрибуты, так как мне понадобится обращаться к ним из js. Теперь в конструкторах классов TabNavigationItem и TabContentItem для получения документа шаблона мне достаточно будет найти соответствующий элемент и обратится к его свойству import, после чего поиск шаблона я буду выполнять уже в импортируемом документе:
Поддержка HTML templates: Edge c 16, Firefox c 59, Chrome c 49, Safari c 11. С поддержкой импортов печальнее: Chrome c 49. Потому примеры из этой статьи можно посмотреть только в последних Chrome.
Есть много способов создать свой вебсайт. Из этих способов самый простой — использовать шаблон сайта, созданный специалистом по созданию шаблонов.
В Интернете имеется множество различных шаблонов веб-страниц и целых сайтов, как платных, так и бесплатных. Обычно платные шаблоны содержат больше возможностей, чем бесплатные. Они могут включать сценарии, исходные файлы для дизайна, спецшрифты, библиотеку изображений и пр.
В данном примере выбран простой шаблон (с использованием html и CSS), использовать который сможет человек с любой степенью подготовленности. Шаблон бесплатный. Шаблон легко изменяется (редактируется). Автор шаблона гарантирует, что сайт, созданный на основании шаблона, будет правильно отражаться всеми браузерами. Также он обещает, что свою первую страницу сайта Вы создадите за минуты.
Автор шаблона Andreas Viklund дает пошаговую инструкцию по применению шаблона.
Другие шаблоны на этом сайте могут быть более сложными, чем приведенный в данном примере, но принципы редактирования всех шаблонов одинаковы.
Сегодня в Интернете можно найти (и при желание загрузить) огромное количество шаблонов веб-страниц или шаблонов сайтов. Все они называются «шаблонами», но являются ли они таковыми? На самом деле их было бы правильнее называть «образцами страниц».
Чем отличается образец страницы от шаблона?
В шаблоне есть неизменные элементы (например — название, верхний и нижний колонтитулы, навигационная панель) и есть редактируемые области, т.е. области, которые могут изменяться в страницах, создаваемых на основании шаблона. Неизменные элементы шаблона наследуются страницами, созданными по шаблону. При изменении шаблона изменяются все страницы, созданные по шаблону.
Страница-образец также служит для создания других страниц, но при этом страницы создаются путем копирования образца и затем изменяются самым произвольным образом. Изменение страницы-образца никак не отражается на страницах, созданных по этому образцу.
Большинство шаблонов, которые предлагаются в Интернете, как раз и являются такими образцами страниц, а не шаблонами. Нет смысла спорить со всем белым светом, шаблон — так шаблон. Придется и нам называть эти страницы-образцы шаблонами (но все же не забывая при этом о вышеупомянутом различии).
Страницу-образец можно превратить в шаблон, используя функцию «Сохранить как шаблон», имеющуюся во многих веб-редакторах.
Приступим к работе по созданию сайта. Начнем с Шага 1 — Поиск и загрузка шаблона .
