12. Преимущества <template>
1. Содержание остаётся эффективно инертным, пока оно не
активировано. По сути разметка является скрытым DOM'ом и не
рендерится.
2. Содержимое шаблона не порождает побочных эффектов: картинки не
грузятся, видео не проигрывается, скрипты не выполняются.
3. Так же внутренности шаблона не видны при выборе нод через
querySelector() или document.getElementById() .
4. Шаблоны могут находиться в любом месте, даже там, где есть строгие
ограничения на содержимое, например в <head> или <table> .
14. Пример <template>
01. <template>
02.
<img src="kitten.jpg"/>
03. </template>
01. var content = document.querySelector('template').content;
02. document.querySelector('#container').appendChild(
03.
content.cloneNode(true));
14
15. <template> и стили
1. Стили тоже не применяются, пока шаблон не активирован
2. Добавлен селектор :host(<selector>) , который позволяет
применять селекторы только на шаблон
3. НО при использовании стилей в шаблоне надо очень аккуратно
смотреть на оптимизаторы кода, которые делают структурные
изменения
15
32. Lifecycle callbacks
unresolved (inherits from HTMLElement)
элемент есть на странице, но не зарегистрирован через
document.register
unknown (inherits from HTMLUnknownElement)
элемент браузеру не известен
Demo
32
39. Shadow DOM
Shadow DOM реализует инкапсуляцию DOM-дерева. В него прячется
оформительская вёрстка, необходимая для создания визуальнокрасивого контрола/виджета и т.д
http://w3c.github.io/webcomponents/spec/shadow/index.html
39
40. Shadow DOM JS
01. var Shadow = Object.create(HTMLElement.prototype);
02. Shadow.createdCallback = function() {
03.
var shadow = this.createShadowRoot();
04.
shadow.innerHTML = "Ололо";
05. };
06. document.register('x-browser', {prototype: Shodow});
40
46. Imports
● <link rel="stylesheet"> для загрузки CSS
● <script src> для загрузки скриптов
● <img> для загрузки картинок
● <audio> для загрузки аудио
● <video> для загрузки видео
● ??? для загрузки HTML
46
48. Imports hacks
● <iframe> — живёт своей жизнью, т.е свой контекст относительно
текущей страницы и трудности взаимодействия JavaScript и абсолютно
невозможно стилизовать.
48
49. Imports hacks
● <iframe> — живёт своей жизнью, т.е свой контекст относительно
текущей страницы и трудности взаимодействия JavaScript и абсолютно
невозможно стилизовать.
● AJAX
49
50. Imports hacks
● <iframe> — живёт своей жизнью, т.е свой контекст относительно
текущей страницы и трудности взаимодействия JavaScript и абсолютно
невозможно стилизовать.
● AJAX — требует JavaScript'а :(
50
51. Imports hacks
● <iframe> — живёт своей жизнью, т.е свой контекст относительно
текущей страницы и трудности взаимодействия JavaScript и абсолютно
невозможно стилизовать.
● AJAX — требует JavaScript'а :(
● хаки типа <script type="text/html">
51
52. Imports hacks
● <iframe> — живёт своей жизнью, т.е свой контекст относительно
текущей страницы и трудности взаимодействия JavaScript и абсолютно
невозможно стилизовать.
● AJAX — требует JavaScript'а :(
● хаки типа <script type="text/html">
52
54. Особенности Imports
● Вёрстка и CSS глобальные
● JavaScript глобальный, но поддерживает локальный скоуп через
document.currentScript.ownerDocument
● Кэширование вёрстки в браузере
● Не блокируют загрузку страницы (async)
54
57. Decorators
A decorator is something that enhances or overrides the presentation of
an existing element.
http://www.w3.org/TR/components-intro/#decorator-section
57
74. События
on(e, [data], fn, [ctx])
подписка на событие e
onFirst(e, [data], fn, [ctx])
подписка только на первое событие e
un([e], [fn], [ctx]) —
отписка от конкретного события e или всех событий
trigger(e, [data])
нотификация о событии e
74
75. Поиск элементов в терминах
БЭМ
findBlockInside({String})
ищет блок с заданным именем
findBlockInside({blockName: '', modName: '', modVal:
''})
ищет блок с заданными именем, модификатором и значением
findBlocksInside({String|Object})
ищет блоки -"75
76. Поиск элементов в терминах
БЭМ
findElem(elemName[, elemMod, elemModVal])
ищет элемент, возвращает jQuery-объект (некэширует
результат)
76
79. Итого
● Веб-компоненты уже внедряются в браузеры
● Стоит следить за веб-компонентами, т.к они сильно облегчают работу
фронтендерам
● BEM == веб-компоненты. Можно использовать уже сейчас и привыкать
79