Web Components и будущее web-
разработкиАндрей Листочкин
@listochkin
Чего разработчикам хотелось?
XML namespaces: 1998(HTML in XML => XHTML)
JSP/JSF
Кастомные теги
iframe - 1997 IEYUI3 Contextual Reset - 2009
Изоляция
Совместимость
2006
2012
Золотая рыбка исполняет желания
Золотая рыбка исполняет желания
1. Теги!Бонус: неймспейсы! <my-tag>
Золотая рыбка исполняет желания
1. Теги!Бонус: неймспейсы! <my-tag>
2. Изоляция!Templates, Shadow DOM
Золотая рыбка исполняет желания
1. Теги!Бонус: неймспейсы! <my-tag>
2. Изоляция!Templates, Shadow DOM
3. Совместимость!Теги - они и в Африке теги.
Золотая рыбка исполняет желания
1. Теги!Бонус: неймспейсы! <my-tag>
2. Изоляция!Templates, Shadow DOM
3. Совместимость!Теги - они и в Африке теги.
Нативно
Полифилы в
комплекте
<template>
<script type="text/template">
<p>I am text</p>
<img src="will/download">
</script>
<template> <p>I am DOM</p>
<img src="will/defer">
</template>
Custom Elements
<x-datepicker id="from"
value="2013-10-27" />
$('#from').on('change', function (e) {
...
});
Custom Elements
<fb-newsfeed>
<fb-news-item from="Вася" likes="5"> <img src="lolcat.png">
<fb-comment from="Игорь"> Хахаха :) </fb-comment>
</fb-news-item>
...
Shadow DOM
A Shadow
B
C A’
<X> +