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> +