Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 28. Компонентная модель вёрстки. Веб-компоненты

Содержание курса

Компонентная модель вёрстки

В этом уроке мы кратко рассмотрим создание собственных тегов.

Веб компоненты

Веб компонет представляет собой новый DOM-элемент, созданный вручную. Функционал веб компонентов пока находится на стадии тестирования (2018 - на момент написания статьи).

Стандарт Web Components содержит в себе 4 части:

1. Шаблоны - заготовки, на основе которых создаются новые теги
2. HTML импорты - возможность подключения HTML файла из HTML файла
3. Shadow DOM - технология, которая применяется для создания веб компонентов и определяет их поведение
4. Собственные ("кастомные") элементы

Шаблоны

Каждый элемент кода HTML содержит шаблон, в котором описаны все свойства и поведение для элемента. Эти свойства и поведение элементов описываются в тегах <template>...</template>. Для того, чтобы описанный шаблон для нового элемента сработал, его нужно импортировать в текущий файл html из внешнего. Это делается при помощи тега <link />:

<link rel="import" href="new-element.html" />

HTML импорты

HTML файл подключается при помощи тега <link /> со значением атрибута rel="import" в значении атрибута href в этом случае прописывается путь к подключаемому файлу.

Давайте создадим два файла index.html и importedpage.html и затем импортируем файл importedpage.html в index.html:

				Файл importedpage.html
		===============================

<div id="imported">

	<h2>Импортируемая страница</h2>
	<p>Эта страница будет импортирована в файл index.html</p>
	
</div>
				Файл index.html
		===============================

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Главная</title>
			<link rel="import" href="importedpage.html" />
		</head>
		<body>
		
			<h1>Главная страница</h1>
			
			<!-- Здесь нам понадобится немного кода JavaScript -->
			
			<script>
				  var link = document.querySelector( 'link[rel=import]');
				  var content = link.import.querySelector( '#imported');
				  document.body.appendChild(content.cloneNode(true));
			</script>
	
		</body>
	</html>

Результат:

Такая схема гарантированно работает в браузере Chrome, в других браузерах могут понадобиться дополнительные «костыли». Следует учесть и то, что браузеры постоянно обновляются, поэтому сейчас, возможно, уже будет работать и без «костылей»

Shadow DOM (теневой DOM)

Shadow DOM является ключевым аспектом работы веб-компонентов. Он используется разработчиками браузеров для обработки основных элементов HTML кода. Однако в коде страницы теневой DOM не виден, т.к. он специально прячется для упрощения просмотра кода. Однако это можно изменить и посмотреть на теневой DOM. Для этого откройте браузер Google Chrome выберите пункт меню "дополнительные инструменты" > "Dev Tools" (инструменты разработчика) > в верхнем окне кликните на значок настроек, выберите "Settings" > в группе "Elements" установите флажок для пункта "Show user agent shadow DOM" и в нижнем окне вы увидите все свойства, прописанные для выбранного элемента в верхнем окне.

Создание собственных элементов

Для создания собственных элементов, содержащих шаблон, стили и логику (JS), понадобится bower-components и polymer от Google. Здесь мы не станем подробно рассматривать эту тему, т.к. она не является критично важной для создания сайтов.

Собственные простые элементы можно создать при помощи CSS:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Собственный элемент через CSS</title>
			<style>
			
				my-element {
					color: slateblue;
					font-size: 2em;
					background: yellow;
					display: block;
					text-align: center;
					font-weight: bold;
					font-style: italic;
					}
			
			my-element:after{
				content: 'Мой новый элемент';
			}
			
			</style>
		</head>
		<body>
			
			<my-element></my-element>
		
		</body>
	</html>

Результат отображения:

Следует отметить, что создание элемента через CSS и веб-компоненты - это разные вещи. При помощи polymer от Google можно вынести целый кусок сайта в отдельный тег.

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля


Комментарий №1
29-07-2018 05:10:33
Андрей
Смутная и непонятная это какая-то тема с веб компонентами. Сколько читал на разных сайтах так и не понял зачем это вообще придумали. Понял только то, что там нужно устанавливать кучу всяких библиотек типа bower и polymer.