{"id":210058,"date":"2014-01-23T13:02:04","date_gmt":"2014-01-23T09:02:04","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=210058"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=210058","title":{"rendered":"<span class=\"post_title\">Web Components \u2014 \u0431\u0443\u0434\u0443\u0449\u0435\u0435 Web<\/span>"},"content":{"rendered":"<div class=\"content html_format\">\n<div style=\"text-align:center;\"><img decoding=\"async\"  src=\"http:\/\/habr.habrastorage.org\/post_images\/4f6\/ba9\/2dc\/4f6ba92dc07661849c8bae06645315f1.png\"\/><\/div>\n<blockquote><p>\u0421\u043f\u0443\u0441\u0442\u044f \u043a\u0430\u043a\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0441\u0442\u0430\u043b\u043e \u044f\u0441\u043d\u043e, \u0447\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u0434\u0435\u044f Prototype \u0432\u043e\u0448\u043b\u0430 \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0438\u0435 \u0441 \u043c\u0438\u0440\u043e\u043c. \u0421\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u043e\u0442\u0432\u0435\u0442\u0438\u043b\u0438 \u043d\u0430 \u0432\u043e\u0437\u0440\u043e\u0436\u0434\u0435\u043d\u0438\u0435 Javascript \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u043e\u0432\u044b\u0445 API, \u043c\u043d\u043e\u0433\u0438\u0435 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432\u0430\u043b\u0438 \u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 Prototype.<\/p>\n<p>  &mdash; Sam Stephenson, \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u044c Prototype.js, <a href=\"http:\/\/sstephenson.us\/posts\/you-are-not-your-code\">You Are Not Your Code<\/a><\/p><\/blockquote>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u044e\u0442 \u0433\u0430\u0440\u043c\u043e\u043d\u0438\u0447\u043d\u043e. \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043e \u043d\u043e\u0432\u044b\u0445 API \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u0442\u0440\u0435\u043d\u0434\u043e\u0432 \u0432 opensource \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430\u0445. \u0422\u0430\u043a <em>prototype.js<\/em> \u0441\u043f\u043e\u0441\u043e\u0431\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044e <code>Array.prototype.forEach()<\/code>, <code>map()<\/code> \u0438 \u0442.\u0434., <em>jquery<\/em> \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0438\u043b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043d\u0430 <code>HTMLElement.prototype.querySelector()<\/code> \u0438 <code>querySelectorAll()<\/code>.<\/p>\n<p>  \u041a\u043e\u0434 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0438 \u043e\u0431\u044a\u0451\u043c\u043d\u0435\u0435. \u041f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0445\u0430\u0443\u0441 \u043f\u043e\u0434 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u043c. <em>Backbone<\/em>, <em>ember<\/em>, <em>angular<\/em> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u043e\u0437\u0434\u0430\u043b\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u043e\u0447\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0447\u0438\u0441\u0442\u044b\u0439, \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u0434. \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0443\u0440\u043e\u0432\u043d\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f &mdash; \u044d\u0442\u043e \u0442\u0440\u0435\u043d\u0434. \u0415\u0433\u043e \u0434\u0443\u0445 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 JS \u0441\u0440\u0435\u0434\u0435 \u0443\u0436\u0435 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f. \u041d\u0435 \u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0440\u0435\u0448\u0438\u043b\u0438 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0430 \u043d\u0435\u0433\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.<br \/>  <a name=\"habracut\"><\/a><br \/>  <em>Web Components<\/em> &mdash; \u044d\u0442\u043e <em>\u0447\u0435\u0440\u043d\u043e\u0432\u0438\u043a<\/em> \u043d\u0430\u0431\u043e\u0440\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432. \u0415\u0433\u043e \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u043b\u0438 \u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u043f\u0440\u043e\u0434\u0432\u0438\u0433\u0430\u044e\u0442 \u0440\u0435\u0431\u044f\u0442\u0430 \u0438\u0437 Google, \u043d\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u0442\u0438\u0432\u0443 \u0443\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u043b\u0438 \u0432 Mozilla. \u0418 Microsoft. \u0428\u0443\u0447\u0443, Microsoft \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u043f\u0440\u0438 \u0434\u0435\u043b\u0430\u0445. \u041c\u043d\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0438\u0432\u044b\u0435 (\u0441\u0443\u0434\u044f \u043f\u043e \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c, \u0441\u0442\u0430\u0442\u044c\u044f\u043c \u0438 \u0442.\u0434.).<\/p>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u0434\u0435\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u201c\u0432\u0438\u0434\u0436\u0435\u0442\u044b\u201d. \u0424\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043e\u0442 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043d\u0438 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043a\u0430\u043a \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e HTML, \u0442\u0430\u043a \u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JS API.<\/p>\n<p>  \u042f \u043f\u0430\u0440\u0443 \u043d\u0435\u0434\u0435\u043b\u044c \u0438\u0433\u0440\u0430\u043b\u0441\u044f \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 API \u0438 \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u0432 \u043a\u0430\u043a\u043e\u043c-\u0442\u043e \u0432\u0438\u0434\u0435, \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u044d\u0442\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u0425\u043e\u0442\u044f \u0438\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432 <em>Chrome Canary<\/em> \u0438\u043d\u043e\u0433\u0434\u0430 \u0441\u0442\u0430\u0432\u0438\u043b\u0430 \u043c\u0435\u043d\u044f \u0432 \u0442\u0443\u043f\u0438\u043a (\u043c\u0435\u043d\u044f, \u0438 \u0441\u0430\u043c Chrome Canary), Web Components \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0442\u0435\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043d\u0435 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u043b\u043e.<\/p>\n<p>  \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442 Web Components \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0447\u0430\u0441\u0442\u0435\u0439:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.w3.org\/TR\/components-intro\/#template-section\">Templates<\/a>\n<p>  \u0424\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b HTML, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c.<\/p>\n<p>  \u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0442\u0435\u0433\u043e\u0432 <code>&lt;template&gt;<\/code> \u043f\u0430\u0440\u0441\u0438\u0442\u0441\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c, \u043d\u043e \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 (\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0430\u0443\u0434\u0438\u043e\u2026) \u043f\u043e\u043a\u0430 \u043c\u044b \u043d\u0435 \u0432\u0441\u0442\u0430\u0432\u0438\u043c \u0435\u0433\u043e \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442.<\/p>\n<\/li>\n<li><a href=\"http:\/\/w3c.github.io\/webcomponents\/spec\/shadow\/\">Shadow DOM<\/a>\n<p>  \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438 HTML.<\/p>\n<p>  Shadow DOM \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u044b\u043c. \u041e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 &mdash; \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b <code>&lt;audio&gt;<\/code> \u0438 <code>&lt;video&gt;<\/code>. \u0412 \u043a\u043e\u0434\u0435 \u043c\u044b \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u043c \u043e\u0434\u0438\u043d \u0442\u0435\u0433, \u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u0441\u043b\u0430\u0439\u0434\u0435\u0440\u044b, \u043a\u043d\u043e\u043f\u043a\u0438, \u043e\u043a\u043d\u043e \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0442\u0435\u043b\u044f). \u0412 Chrome \u044d\u0442\u0438 \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442<br \/>  Shadow DOM.<\/p>\n<\/li>\n<li><a href=\"http:\/\/www.w3.org\/TR\/components-intro\/#custom-element-section\">Custom Elements<\/a>\n<p>  <em>Custom Elements<\/em> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c API \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041a\u043e\u0433\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c \u043c\u0435\u0447\u0442\u0430\u043b\u0438 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0432 HTML \u0431\u044b\u043b \u0442\u0435\u0433 <code>&lt;menu&gt;<\/code> \u0438\u043b\u0438 <code>&lt;user-info&gt;<\/code>?<\/p>\n<\/li>\n<li><a href=\"http:\/\/www.w3.org\/TR\/components-intro\/#imports-section\">Imports<\/a>\n<p>  \u0418\u043c\u043f\u043e\u0440\u0442 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0438\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432.<\/li>\n<\/ul>\n<p>  \u0412 Web Components \u0431\u043e\u043b\u044c\u0448\u0435 \u0447\u0430\u0441\u0442\u0435\u0439 \u0438 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u0434\u0435\u0442\u0430\u043b\u0435\u0439. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0435\u0449\u0451 \u0431\u0443\u0434\u0443<br \/>  \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u0442\u044c, \u0434\u043e \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u043f\u043e\u043a\u0430 \u043d\u0435 \u0434\u043e\u0431\u0440\u0430\u043b\u0441\u044f.<\/p>\n<h3>Templates<\/h3>\n<p>  \u041a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u043f\u0440\u043e\u0441\u0442\u0430. \u0425\u043e\u0442\u044f \u043f\u043e\u0434 \u044d\u0442\u0438\u043c \u0441\u043b\u043e\u0432\u043e\u043c \u0432 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0435 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u0442\u043e, \u043a \u0447\u0435\u043c\u0443 \u043c\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438.<\/p>\n<p>  \u0412 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 web-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u044b &mdash; \u044d\u0442\u043e \u0441\u0442\u0440\u043e\u043a\u0438 \u0438\u043b\u0438 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b DOM, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e.<\/p>\n<blockquote><p>\u0412 web components \u0448\u0430\u0431\u043b\u043e\u043d\u044b &mdash; \u044d\u0442\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b DOM. \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0430\u0440\u0441\u0438\u0442 \u0438\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435, \u043d\u043e \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043c\u044b \u043d\u0435 \u0432\u0441\u0442\u0430\u0432\u0438\u043c \u0435\u0433\u043e \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442. \u0422\u043e \u0435\u0441\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0430\u0443\u0434\u0438\u043e \u0438 \u0432\u0438\u0434\u0435\u043e, \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442\u044b.  <\/p><\/blockquote>\n<p>  \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0442\u0430\u043a\u043e\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 \u043d\u0435 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"html\">      &lt;template id=&quot;tmpl-user&quot;&gt;         &lt;h2 class=&quot;name&quot;&gt;\u0418\u0432\u0430\u043d \u0418\u0432\u0430\u043d\u044b\u0447&lt;\/h2&gt;         &lt;img src=&quot;photo.jpg&quot;&gt;       &lt;\/template&gt; <\/code><\/pre>\n<p>  \u0425\u043e\u0442\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 <code>&lt;template&gt;<\/code>. \u0414\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0434\u043e \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e js:<\/p>\n<pre><code class=\"javascript\">    var tmpl = document.querySelector('#tmpl-user');     \/\/ \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 &lt;template&gt;     var content = tmpl.content;     var imported;      \/\/ \u041f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d:     content.querySelector('.name').innerText = '\u0410\u043a\u0430\u043a\u0438\u0439';      \/\/ \u0427\u0442\u043e\u0431\u044b \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u044c\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430,     \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 document.importNode()     \/\/     \/\/ \u042d\u0442\u043e \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 `\u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c` \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u0430,     \/\/ \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u0447\u043d\u0451\u0442 \u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 `photo.jpg`     imported = document.importNode(content);      \/\/ \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442:     document.body.appendChild(imported); <\/code><\/pre>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"http:\/\/filipovskii.github.io\/web-components-demo\/wc-templates\/\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<blockquote><p>\u0412\u0441\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 <a href=\"https:\/\/www.google.com\/intl\/en\/chrome\/browser\/canary.html\">Chrome Canary<\/a> \u0441\u043e \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c\u0438 \u0444\u043b\u0430\u0433\u0430\u043c\u0438:<\/p>\n<ul>\n<li>Experimental Web Platform features<\/li>\n<li>Enable HTML Imports<\/li>\n<\/ul>\n<p>  <\/p><\/blockquote>\n<p>  <\/p>\n<h4>\u0414\u043b\u044f \u0427\u0435\u0433\u043e?<\/h4>\n<p>  \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u0440\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c\u0438:<\/p>\n<ol>\n<li>\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u0432 \u0441\u043a\u0440\u044b\u0442\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u041a\u043e\u0433\u0434\u0430 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043d\u0443\u0436\u0435\u043d,<br \/>   \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435:\n<pre><code class=\"html\">        &lt;div hidden data-template=&quot;my-template&quot;&gt;           &lt;p&gt;Template Content&lt;\/p&gt;           &lt;img&gt;&lt;\/img&gt;         &lt;\/div&gt; <\/code><\/pre>\n<p>  \u041c\u0438\u043d\u0443\u0441\u044b \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u201c\u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c\u201d \u043a\u043e\u0434 \u0448\u0430\u0431\u043b\u043e\u043d\u0430. \u0422\u043e \u0435\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u0434 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0438 \u0442.\u0434.<\/p>\n<\/li>\n<li>\u041f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 (\u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c AJAX\u043e\u043c \u0438\u043b\u0438 \u0438\u0437 <code>&lt;script type=&quot;x-template&quot;&gt;<\/code>).\n<pre><code class=\"html\">         &lt;sctipt type=&quot;x-template&quot; data-template=&quot;my-template&quot;&gt;            &lt;p&gt;Template Content&lt;\/p&gt;            &lt;img src=&quot;{{ image }}&quot;&gt;&lt;\/img&gt;          &lt;\/script&gt; <\/code><\/pre>\n<p>  \u041c\u0438\u043d\u0443\u0441 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438. \u042d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0443\u0433\u0440\u043e\u0437\u0443 XSS, \u043d\u0443\u0436\u043d\u043e \u0443\u0434\u0435\u043b\u044f\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e.<\/p>\n<\/li>\n<li>\u041a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u0432\u0440\u043e\u0434\u0435 <a href=\"http:\/\/twitter.github.io\/hogan.js\/\">hogan.js<\/a>, \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441\u043e \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438. \u0417\u043d\u0430\u0447\u0438\u0442 \u0438\u043c\u0435\u044e\u0442 \u0442\u043e\u0442 \u0436\u0435 \u0438\u0437\u044a\u044f\u043d, \u0447\u0442\u043e \u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0442\u0438\u043f\u0430.\n<\/li>\n<\/ol>\n<p>  \u0423 <code>&lt;template&gt;<\/code> \u043d\u0435\u0442 \u044d\u0442\u0438\u0445 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u0432. \u041c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 DOM, \u043d\u0435 \u0441\u043e \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438. \u041a\u043e\u0433\u0434\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043a\u043e\u0434, \u0442\u0430\u043a\u0436\u0435 \u0440\u0435\u0448\u0430\u0442\u044c \u043d\u0430\u043c.<\/p>\n<h3>Shadow DOM<\/h3>\n<p>  \u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f. \u042d\u0442\u043e\u0433\u043e \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439 \u043c\u043d\u0435 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u043b\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e. \u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Shadow DOM \u0438 \u043a\u0430\u043a \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u043e\u0449\u0435 \u043f\u043e\u043d\u044f\u0442\u044c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435.<\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c html5 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;audio&gt;<\/code> \u043a\u043e\u0434 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"html\">    &lt;audio controls src=&quot;kings-speech.wav&quot;&gt;&lt;\/audio&gt; <\/code><\/pre>\n<p>  \u041d\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/a2e\/015\/4fb\/a2e0154fb26fab0f5ed74d49f8891aee.png\" alt=\"audio element\"\/><\/p>\n<p>  \u041c\u044b \u0432\u0438\u0434\u0438\u043c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432, \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0431\u0430\u0440, \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0434\u043b\u0438\u043d\u044b \u0430\u0443\u0434\u0438\u043e. \u041e\u0442\u043a\u0443\u0434\u0430 \u044d\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u043a\u0430\u043a \u0434\u043e \u043d\u0438\u0445 \u0434\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f? \u041e\u0442\u0432\u0435\u0442 &mdash; \u043e\u043d\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 Shadow Tree \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u0430\u0436\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0445 \u0432 DevTools, \u0435\u0441\u043b\u0438 \u0437\u0430\u0445\u043e\u0442\u0438\u043c.<\/p>\n<blockquote><p>\u0427\u0442\u043e\u0431\u044b Chrome \u0432 DevTools \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 Shadow DOM, \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 DevTools, \u0432\u043a\u043b\u0430\u0434\u043a\u0430 <em>General<\/em>, \u0440\u0430\u0437\u0434\u0435\u043b <em>Elements<\/em> \u0441\u0442\u0430\u0432\u0438\u043c \u0433\u0430\u043b\u043e\u0447\u043a\u0443 <em>Show Shadow DOM<\/em>.  <\/p><\/blockquote>\n<p>  \u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 Shadow DOM \u0442\u0435\u0433\u0430 <code>&lt;audio&gt;<\/code> \u0432 DevTools:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/7ff\/857\/040\/7ff8570408db1415ae895f1aa435675d.png\" alt=\"devtools shadow dom\"\/><\/p>\n<p>  <a href=\"http:\/\/filipovskii.github.io\/web-components-demo\/wc-shadowdom-audio\/\">\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n<h5>\u0422\u0435\u043e\u0440\u0438\u044f Shadow DOM<\/h5>\n<p>  <em>Shadow Tree<\/em> &mdash; \u044d\u0442\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u043e \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435. \u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <em>shadow host<\/em>, \u043d\u0430 \u0435\u0433\u043e \u043c\u0435\u0441\u0442\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 <em>shadow tree<\/em>, \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u0430\u043c\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u0418\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441 <code>&lt;audio&gt;<\/code> \u0442\u0435\u0433\u043e\u043c \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435, \u043d\u0430 \u0435\u0433\u043e \u043c\u0435\u0441\u0442\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 <em>shadow tree<\/em>.<\/p>\n<p>  \u0424\u0438\u0448\u043a\u0430 shadow dom \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u0442\u0438\u043b\u0438, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u0432 \u043d\u0451\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>&lt;style&gt;<\/code>, \u043d\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442. \u0422\u0430\u043a\u0436\u0435 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 shadow tree. \u041e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<h5>\u041f\u043e\u0441\u0430\u0434\u0438\u0442\u044c \u0442\u0435\u043d\u0435\u0432\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e<\/h5>\n<p>  <em>Shadow DOM API<\/em> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438<br \/>  \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c <em>shadow tree<\/em>.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u043f\u0440\u0438\u043c\u0435\u0440<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"html\">    &lt;div class=&quot;shadow-host&quot;&gt;       \u042d\u0442\u043e\u0442 \u0442\u0435\u043a\u0441\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u0442.     &lt;\/div&gt;      &lt;script&gt;       var shadowHost = document.querySelector('.shadow-host');       var shadowRoot = shadowHost.createShadowRoot();        shadowRoot.innerText = '\u041e\u043d \u0443\u0432\u0438\u0434\u0438\u0442 \u044d\u0442\u043e\u0442 \u0442\u0435\u043a\u0441\u0442.'     &lt;\/script&gt; <\/code><\/pre>\n<p>  \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/4f6\/46c\/bb1\/4f646cbb1224bf81a06ab608af1d985d.png\" alt=\"custom shadow dom\"\/>  <\/div>\n<\/div>\n<p>  <a href=\"http:\/\/filipovskii.github.io\/web-components-demo\/wc-shadowdom-custom\/#1\">\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n<h4>\u041f\u0440\u043e\u0435\u043a\u0446\u0438\u0438, \u0442\u0435\u0433 <code>&lt;content&gt;<\/code><\/h4>\n<p>  \u041f\u0440\u043e\u0435\u043a\u0446\u0438\u044f &mdash; \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0445\u043e\u0441\u0442\u0430 \u0432 <em>shadow tree<\/em>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0435 \u0435\u0441\u0442\u044c \u0442\u0435\u0433 <code>&lt;content&gt;<\/code>.<\/p>\n<blockquote><p>\u0412\u0430\u0436\u043d\u043e, \u0447\u0442\u043e <code>&lt;content&gt;<\/code> <strong>\u043f\u0440\u043e\u0435\u0446\u0438\u0440\u0443\u0435\u0442<\/strong> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0445\u043e\u0441\u0442\u0430, \u0430 \u043d\u0435 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442 \u0435\u0433\u043e \u0438\u0437 \u0445\u043e\u0441\u0442\u0430 \u0432 shadow tree. \u041f\u043e\u0442\u043e\u043c\u043a\u0438 \u0445\u043e\u0441\u0442\u0430 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0432\u043e\u0451\u043c \u043c\u0435\u0441\u0442\u0435, \u043d\u0430 \u043d\u0438\u0445 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u0438 <strong>\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430<\/strong> (\u0430 \u043d\u0435 shadow tree). <code>&lt;content&gt;<\/code> \u044d\u0442\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u043e\u043a\u043d\u043e \u043c\u0435\u0436\u0434\u0443 \u043c\u0438\u0440\u0430\u043c\u0438.  <\/p><\/blockquote>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u043f\u0440\u0438\u043c\u0435\u0440<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"html\">    &lt;template id=&quot;content-tag&quot;&gt;       &lt;p&gt;         \u042d\u0442\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435         &lt;strong&gt;shadow tree&lt;\/strong&gt;.       &lt;\/p&gt;       &lt;p&gt;         \u041d\u0438\u0436\u0435 \u043f\u0440\u043e\u0435\u043a\u0446\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e         &lt;strong&gt;shadow host&lt;\/strong&gt;:       &lt;\/p&gt;       &lt;content&gt;&lt;\/content&gt;     &lt;\/template&gt;      &lt;div class=&quot;shadow-host&quot;&gt;       &lt;h1 class=&quot;name&quot;&gt;\u0412\u0430\u0440\u043b\u0430\u043c&lt;\/h1&gt;       &lt;img src=&quot;varlam.png&quot;&gt;       &lt;p class=&quot;description&quot;&gt;\u0411\u043e\u0434\u0440\u044b\u0439 \u041f\u0451\u0441&lt;\/p&gt;     &lt;\/div&gt;      &lt;script&gt;       var host = document.querySelector('.shadow-host'),           template = document.querySelector('#content-tag'),           shadow = host.createShadowRoot();        shadow.appendChild(template.content);     &lt;\/script&gt;    <\/code><\/pre>\n<p>  \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/215\/c1b\/fc8\/215c1bfc8d7a9261bdd7e02ccaee3352.png\" alt=\"content demo\"\/>  <\/div>\n<\/div>\n<p>  <a href=\"http:\/\/filipovskii.github.io\/web-components-demo\/wc-shadowdom-custom\/#2\">\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n<h4>\u0421\u0442\u0438\u043b\u0438 \u0432 Shadow DOM<\/h4>\n<p>  \u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 &mdash; \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0444\u0438\u0448\u043a\u0430 <em>shadow DOM<\/em>. \u0421\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u044b \u0432 <em>shadow tree<\/em> \u0438\u043c\u0435\u044e\u0442 \u0441\u0438\u043b\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430.<\/p>\n<p>  \u0414\u043e\u0441\u0430\u0434\u043d\u0430\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c &mdash; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 <em>shadow tree<\/em> \u0432\u043d\u0435\u0448\u043d\u0438\u0435 css \u0444\u0430\u0439\u043b\u044b \u043d\u0435\u043b\u044c\u0437\u044f. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u044d\u0442\u043e \u043f\u043e\u043f\u0440\u0430\u0432\u044f\u0442 \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u043f\u0440\u0438\u043c\u0435\u0440<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"html\">    &lt;template id=&quot;color-green&quot;&gt;       &lt;style&gt;         div { background-color: green; }       &lt;\/style&gt;        &lt;div&gt;\u0437\u0435\u043b\u0451\u043d\u044b\u0439&lt;\/div&gt;     &lt;\/template&gt;      &lt;div class=&quot;shadow-host&quot;&gt;&lt;\/div&gt;      &lt;script&gt;       var host = document.querySelector('.shadow-host'),       template = document.querySelector('#color-green'),       shadow = host.createShadowRoot();        shadow.appendChild(template.content);     &lt;\/script&gt; <\/code><\/pre>\n<p>  \u0417\u0435\u043b\u0451\u043d\u044b\u0439 \u0444\u043e\u043d \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e `&lt;div&gt;` \u0432\u043d\u0443\u0442\u0440\u0438 shadow tree. \u0422\u043e<br \/>  \u0435\u0441\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u00ab\u043d\u0435 \u0432\u044b\u0442\u0435\u043a\u0443\u0442\u00bb \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442.<\/p>\n<p>  \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/ba7\/689\/a09\/ba7689a091d5674e2b0563cd4e24e41d.png\" alt=\"green\"\/>  <\/div>\n<\/div>\n<p>  <a href=\"http:\/\/filipovskii.github.io\/web-components-demo\/wc-shadowdom-styles\/#1\">\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n<h4>\u041d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u044b\u0435 \u0441\u0442\u0438\u043b\u0438<\/h4>\n<p>  \u041f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>color<\/code>, <code>font-size<\/code> \u0438 <a href=\"http:\/\/www.impressivewebs.com\/inherit-value-css\/\">\u0434\u0440\u0443\u0433\u0438\u0435<\/a>, <strong>\u0432\u043b\u0438\u044f\u044e\u0442<\/strong> \u043d\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 shadow tree. \u041c\u044b \u0438\u0437\u0431\u0435\u0436\u0438\u043c \u044d\u0442\u043e\u0433\u043e, \u0435\u0441\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c <code>shadowRoot.resetStyleInheritance = true<\/code>.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u043f\u0440\u0438\u043c\u0435\u0440<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"html\">    &lt;template id=&quot;reset&quot;&gt;       &lt;p&gt;\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u0441\u0431\u0440\u043e\u0448\u0435\u043d\u044b.&lt;\/p&gt;        &lt;content&gt;&lt;\/content&gt;     &lt;\/template&gt;      &lt;div class=&quot;shadow-host&quot;&gt;       &lt;p&gt;Host Content&lt;\/p&gt;     &lt;\/div&gt;      &lt;script&gt;       var host = document.querySelector('.shadow-host'),         template = document.querySelector('#reset'),         shadow = host.createShadowRoot();        shadow.resetStyleInheritance = true;       shadow.appendChild(template.content);     &lt;\/script&gt; <\/code><\/pre>\n<p>  \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/ab9\/7d4\/3ab\/ab97d43ab22b6c409974cebc98dfc77d.png\" alt=\"inherit styles\"\/>  <\/div>\n<\/div>\n<p>  <a href=\"http:\/\/filipovskii.github.io\/web-components-demo\/wc-shadowdom-styles\/#3\">\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n<h4>\u0410\u0432\u0442\u043e\u0440\u0441\u043a\u0438\u0435 \u0441\u0442\u0438\u043b\u0438<\/h4>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0441\u0442\u0438\u043b\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0432\u043b\u0438\u044f\u043b\u0438 \u043d\u0430 \u0442\u043e, \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 <em>shadow tree<\/em>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>applyAuthorStyles<\/code>.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u043f\u0440\u0438\u043c\u0435\u0440<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"html\">    &lt;template id=&quot;no-author-st&quot;&gt;       &lt;div class=&quot;border&quot;&gt;div.border&lt;\/div&gt;     &lt;\/template&gt;      &lt;style&gt;       \/* \u0412 \u0441\u0442\u0438\u043b\u044f\u0445 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 *\/       .border {         border: 3px dashed red;       }     &lt;\/style&gt;      &lt;div class=&quot;shadow-host&quot;&gt;&lt;\/div&gt;       &lt;script&gt;       var host = document.querySelector('.shadow-host'),           template = document.querySelector('#no-author-st'),           shadow = host.createShadowRoot();        shadow.applyAuthorStyles = false; \/\/ \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e       shadow.appendChild(template.content);     &lt;\/script&gt; <\/code><\/pre>\n<p>  \u0418\u0437\u043c\u0435\u043d\u044f\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>applyAuthorStyles<\/code>, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0440\u0430\u0437\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <code>applyAuthorStyles = false<\/code><\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/417\/c8f\/296\/417c8f296670e9b391052f8ca31f926e.png\" alt=\"no to author styles\"\/><\/p>\n<p>  <code>applyAuthorStyles = true<\/code><\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/e11\/047\/9cd\/e110479cd271e65377269f96910ccfea.png\" alt=\"yes to author styles\"\/>  <\/div>\n<\/div>\n<p>  <a href=\"http:\/\/filipovskii.github.io\/web-components-demo\/wc-shadowdom-styles\/#3\">\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440, applyAuthorStyles=false<\/a><\/p>\n<p>  <a href=\"http:\/\/filipovskii.github.io\/web-components-demo\/wc-shadowdom-styles\/#3\">\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440, applyAuthorStyles=true<\/a><\/p>\n<h4>\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b ^ \u0438 ^^<\/h4>\n<p>  \u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f \u044d\u0442\u043e \u0437\u0434\u043e\u0440\u043e\u0432\u043e, \u043d\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u0432\u0441\u0451 \u0442\u0430\u043a\u0438 \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0434\u043e <em>shadow tree<\/em> \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u0437 \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043c\u043e\u043b\u043e\u0442\u043e\u043a. \u0418 \u043a\u0443\u0432\u0430\u043b\u0434\u0430.<\/p>\n<p>  \u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440 <code>div ^ p<\/code> \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d <code>div p<\/code> \u0441 \u0442\u0435\u043c \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c, \u0447\u0442\u043e \u043e\u043d \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u0435\u0442 \u043e\u0434\u043d\u0443 \u0442\u0435\u043d\u0435\u0432\u0443\u044e \u0433\u0440\u0430\u043d\u0438\u0446\u0443 (<em>Shadow Boundary<\/em>).<\/p>\n<p>  \u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440 <code>div ^^ p<\/code> \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c\u0443, \u043d\u043e \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u0435\u0442 \u041b\u042e\u0411\u041e\u0415 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u0435\u043d\u0435\u0432\u044b\u0445 \u0433\u0440\u0430\u043d\u0438\u0446.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u043f\u0440\u0438\u043c\u0435\u0440<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"html\">    &lt;template id=&quot;hat&quot;&gt;       &lt;p class=&quot;shadow-p&quot;&gt;         \u042d\u0442\u043e \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442.       &lt;\/p&gt;     &lt;\/template&gt;      &lt;style&gt;       \/* \u0412 \u0441\u0442\u0438\u043b\u044f\u0445 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 *\/       .shadow-host ^ p.shadow-p {         color: red;       }     &lt;\/style&gt;      &lt;div class=&quot;shadow-host&quot;&gt;&lt;\/div&gt;      &lt;script&gt;       var host = document.querySelector('.shadow-host'),       template = document.querySelector('#hat'),       shadow = host.createShadowRoot();        shadow.appendChild(template.content);     &lt;\/script&gt; <\/code><\/pre>\n<p>  \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/867\/454\/395\/8674543955281df29a68c95af2da9c1c.png\" alt=\"cat in the hat\"\/>  <\/div>\n<\/div>\n<p>  <a href=\"http:\/\/filipovskii.github.io\/web-components-demo\/wc-shadowdom-styles\/#3\">\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n<h4>\u0417\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u0435\u043d Shadow DOM?<\/h4>\n<p>  Shadow DOM \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u044b\u043c.<\/p>\n<p>  \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 &mdash; \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 <code>iframe<\/code>. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0447\u0435\u0440\u0435\u0441\u0447\u0443\u0440 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d. \u0427\u0442\u043e\u0431\u044b \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0432\u043d\u0435\u0448\u043d\u0438\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u043c, \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u044c \u0431\u0435\u0437\u0443\u043c\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e css \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e.<\/p>\n<p>  \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 <code>iframe<\/code>, <em>Shadow DOM<\/em> &mdash; \u044d\u0442\u043e \u0447\u0430\u0441\u0442\u044c \u0432\u0430\u0448\u0435\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u0418 \u0445\u043e\u0442\u044f <em>shadow tree<\/em> \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043e, \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0438\u043b\u0435\u0439, \u0438\u043b\u0438 \u0440\u0430\u0441\u043a\u043e\u0432\u044b\u0440\u044f\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u043c.<\/p>\n<h3>Custom Elements<\/h3>\n<p>  <em>Custom Elements<\/em> &mdash; \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0438\u0445 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. API \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 Web Components \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0437\u0440\u0435\u043b\u043e \u0438 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 <a href=\"http:\/\/docs.angularjs.org\/guide\/directive\">\u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b<br \/>  Angular<\/a>. \u0412 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u0441 <em>Shadow DOM<\/em> \u0438 <em>\u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c\u0438<\/em>, \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u0430\u044e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0432\u0440\u043e\u0434\u0435 <code>&lt;audio&gt;<\/code>, <code>&lt;video&gt;<\/code> \u0438\u043b\u0438 <code>&lt;input type=&quot;date&quot;&gt;<\/code>.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432, \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0443, \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0434\u0435\u0444\u0438\u0441 \u0432 \u0441\u0432\u043e\u0451\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0438. \u041f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u043d\u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442 <code>HTMLElement<\/code>. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043a\u043e\u0433\u0434\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430\u0442\u044b\u043a\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0432\u0438\u0434\u0430 <code>&lt;my-super-element&gt;<\/code>, \u043e\u043d \u043f\u0430\u0440\u0441\u0438\u0442 \u0435\u0433\u043e \u043a\u0430\u043a <code>HTMLElement<\/code>. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 <code>&lt;mysuperelement&gt;<\/code>, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 <code>HTMLUnknownElement<\/code>.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u043f\u0440\u0438\u043c\u0435\u0440<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"html\">    &lt;dog&gt;&lt;\/dog&gt;     &lt;x-dog&gt;&lt;\/x-dog&gt;      &lt;dl&gt;       &lt;dt&gt;dog type&lt;\/dt&gt;       &lt;dd id=&quot;dog-type&quot;&gt;&lt;\/dd&gt;       &lt;dt&gt;x-dog type&lt;\/dt&gt;       &lt;dd id=&quot;x-dog-type&quot;&gt;&lt;\/dd&gt;     &lt;\/dl&gt;      &lt;script&gt;       var dog = document.querySelector('dog'),           dogType = document.querySelector('#dog-type'),           xDog = document.querySelector('x-dog'),           xDogType = document.querySelector('#x-dog-type');        dogType.innerText = Object.prototype.toString.apply(dog);       xDogType.innerText = Object.prototype.toString.apply(xDog);     &lt;\/script&gt; <\/code><\/pre>\n<p>  \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/38f\/f2b\/972\/38ff2b972c7813e6e0625292ff2cfaee.png\" alt=\"x-dog\"\/>  <\/div>\n<\/div>\n<p>  <a href=\"http:\/\/filipovskii.github.io\/web-components-demo\/wc-custom-elements\/#1\">\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n<h4>API \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/h4>\n<p>  \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0422\u0430\u043a\u0438\u0435, \u043a\u0430\u043a \u043c\u0435\u0442\u043e\u0434 <code>play()<\/code> \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;audio&gt;<\/code>.<\/p>\n<p>  \u0412 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b (lifecycle) \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u0445\u043e\u0434\u0438\u0442 4 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0432\u0435\u0441\u0438\u0442\u044c callback:<\/p>\n<ul>\n<li>created &mdash; \u0441\u043e\u0437\u0434\u0430\u043d \u0438\u043d\u0441\u0442\u0430\u043d\u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/li>\n<li>attached &mdash; \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0432 DOM<\/li>\n<li>detached &mdash; \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u0434\u0430\u043b\u0451\u043d \u0438\u0437 DOM<\/li>\n<li>attributeChanged &mdash; \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d, \u0443\u0434\u0430\u043b\u0451\u043d \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0451\u043d<\/li>\n<\/ul>\n<p>  \u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<ol>\n<li>\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.\n<p>  \u041f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u0434\u043e\u043b\u0436\u0435\u043d \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c <code>HTMLElement<\/code> \u0438\u043b\u0438 \u0435\u0433\u043e \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u0430,<br \/>   \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <code>HTMLButtonElement<\/code>:<\/p>\n<pre><code class=\"javascript\">        var myElementProto = Object.create(HTMLElement.prototype, {           \/\/ API \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u0435\u0433\u043e lifecycle callbacks         }); <\/code><\/pre>\n<p>  <\/li>\n<li>\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 DOM \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>document.registerElement()<\/code>:\n<pre><code class=\"javascript\">        var myElement = document.registerElement('my-element', {           prototype: myElementProto         }); <\/code><\/pre>\n<p>  <\/li>\n<\/ol>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u043f\u0440\u0438\u043c\u0435\u0440<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"html\">    &lt;x-cat&gt;&lt;\/x-cat&gt;     &lt;div&gt;       &lt;strong&gt;Cat's life:&lt;\/strong&gt;       &lt;pre id=&quot;cats-life&quot;&gt;&lt;\/pre&gt;     &lt;\/div&gt;      &lt;script&gt;       var life = document.querySelector('#cats-life'),           xCatProto = Object.create(HTMLElement.prototype, {             nickName: 'Cake', writable: true           });        xCatProto.meow = function () {         life.innerText += this.nickName + ': meow\\n';       };        xCatProto.createdCallback = function () {         life.innerText += 'created\\n';       };        xCatProto.attachedCallback = function () {         life.innerText += 'attached\\n';       };        xCatProto.detachedCallback = function () {         life.innerText += 'detached\\n';       };        xCatProto.attributeChangedCallback = function (name, oldVal, newVal) {         life.innerText += (           'Attribute ' + name +           ' changed from ' + oldVal +           ' to ' + newVal + '\\n');       };        document.registerElement('x-cat', { prototype: xCatProto });        document.querySelector('x-cat').setAttribute('friend', 'Fiona');        document.querySelector('x-cat').meow();        document.querySelector('x-cat').nickName = 'Caaaaake';       document.querySelector('x-cat').meow();        document.querySelector('x-cat').remove();     &lt;\/script&gt; <\/code><\/pre>\n<p>  \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/385\/647\/566\/38564756655573b9912b119cff978b25.png\" alt=\"cats life\"\/>  <\/div>\n<\/div>\n<p>  <a href=\"http:\/\/filipovskii.github.io\/web-components-demo\/wc-custom-elements\/#2\">\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440<\/a><\/p>\n<h4>\u0417\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u043d\u044b Custom Elements?<\/h4>\n<p>  <em>Custom Elements<\/em> \u044d\u0442\u043e \u0448\u0430\u0433 \u043a \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435. \u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430\u043c \u0432\u0430\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438. \u0421\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438-\u043d\u0435\u0439\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u0435 <code>&lt;div&gt;<\/code> \u0438\u043b\u0438 <code>&lt;ul&gt;<\/code> \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0438, \u0442\u043e\u0433\u0434\u0430 \u043a\u0430\u043a <em>Custom Elements<\/em> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0439, \u0443\u0434\u043e\u0431\u043e\u0447\u0438\u0442\u0430\u0435\u043c\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 \u0432\u044b\u0441\u043e\u043a\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435.<\/p>\n<p>  <em>Shadow DOM<\/em> \u0438 <em>Custom Elements<\/em> \u0434\u0430\u044e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u0438\u0434\u0436\u0435\u0442\u044b, \u0441 \u0443\u0434\u043e\u0431\u043d\u044b\u043c API \u0438 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c.<\/p>\n<h3>HTML Imports<\/h3>\n<p>  \u0418\u043c\u043f\u043e\u0440\u0442\u044b &mdash; \u043f\u0440\u043e\u0441\u0442\u043e\u0435 API, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0434\u0430\u0432\u043d\u043e \u043c\u0435\u0441\u0442\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u041e\u043d\u0438 \u0434\u0430\u044e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0438\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u043f\u0440\u0438\u043c\u0435\u0440<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"html\">    &lt;link rel=&quot;import&quot; href=&quot;widget.html&quot;&gt;      &lt;sctipt&gt;       var link = document.querySelector('link[rel=&quot;import&quot;]');        \/\/ \u0414\u043e\u0441\u0442\u0443\u043f \u043a \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c\u0443 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0443 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430       \/\/ *import*.       var importedContent = link.import;        importedContent.querySelector('article');     &lt;\/sctipt&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  <\/p>\n<h3>Object.observe()<\/h3>\n<p>  \u0415\u0449\u0451 \u043e\u0434\u043d\u043e \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0438 \u0447\u0430\u0441\u0442\u044c Web Components (\u043a\u0430\u0436\u0435\u0442\u0441\u044f), \u044d\u0442\u043e API \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <code>Object.observe()<\/code>.<\/p>\n<p>  \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 Chrome, \u0435\u0441\u043b\u0438 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0444\u043b\u0430\u0433 <em>Experimental Web Platform features<\/em>.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u043f\u0440\u0438\u043c\u0435\u0440<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">    var o = {};      Object.observe(o, function (changes) {       changes.forEach(function (change) {          \/\/ change.object \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043e\u0431\u044a\u0435\u043a\u0442\u0430          console.log('property:', change.name, 'type:', change.type);       });     });      o.x = 1     \/\/ property: x type: add     o.x = 2     \/\/ property: x type: update     delete o.x  \/\/ property: x type: delete <\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <code>o<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f callback, \u0432 \u043d\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u043c\u0430\u0441\u0441\u0438\u0432<br \/>  \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c.  <\/div>\n<\/div>\n<p>  <\/p>\n<h3>TODO widget<\/h3>\n<p>  \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0434\u0440\u0435\u0432\u043d\u0435\u0439 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u0438, \u0432\u043e\u043e\u0440\u0443\u0436\u0438\u0432\u0448\u0438\u0441\u044c \u044d\u0442\u0438\u043c\u0438 \u0437\u043d\u0430\u043d\u0438\u044f\u043c\u0438, \u044f \u0440\u0435\u0448\u0438\u043b<br \/>  \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 TODO-\u0432\u0438\u0434\u0436\u0435\u0442. \u0412 \u043d\u0451\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u0438 Web Components, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u0432 \u0441\u0442\u0430\u0442\u044c\u0435.<\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u043e\u0434\u043d\u043e\u043c\u0443 \u0438\u043c\u043f\u043e\u0440\u0442\u0443 \u0438 \u043e\u0434\u043d\u043e\u043c\u0443 \u0442\u0435\u0433\u0443 \u0432 \u0442\u0435\u043b\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u043f\u0440\u0438\u043c\u0435\u0440<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"html\">    &lt;html&gt;       &lt;head&gt;         &lt;link rel=&quot;import&quot; href=&quot;todo.html&quot;&gt;       &lt;\/head&gt;       &lt;body&gt;         &lt;x-todo&gt;&lt;\/x-todo&gt;       &lt;\/body&gt;     &lt;\/html&gt;      &lt;script&gt;       \/\/ JS API \u0432\u0438\u0434\u0436\u0435\u0442\u0430:       var xTodo = document.querySelector('x-todo');       xTodo.items();                \/\/ \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0434\u0430\u0447       xTodo.addItem(taskText);      \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c       xTodo.removeItem(taskIndex);  \/\/ \u0443\u0434\u0430\u043b\u0438\u0442\u044c     &lt;\/script&gt; <\/code><\/pre>\n<p>  \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/51e\/8fe\/2cc\/51e8fe2ccead03494a94f74743d493a0.png\" alt=\"todo widget\"\/>  <\/div>\n<\/div>\n<p>  <a href=\"http:\/\/filipovskii.github.io\/web-components-demo\/wc-todo-demo\/\">\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0434\u0435\u043c\u043e<\/a><\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>  \u0421 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\u043c html5 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0441\u0442\u0430\u043b\u0438 <em>\u043d\u0430\u0442\u0438\u0432\u043d\u043e<\/em> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u043c\u0435\u0434\u0438\u0430-\u0444\u043e\u0440\u043c\u0430\u0442\u044b. \u0422\u0430\u043a\u0436\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u0440\u043e\u0434\u0435 <code>&lt;canvas&gt;<\/code>. \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435. \u042d\u0442\u043e\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b <code>&lt;article&gt;<\/code>, <code>&lt;header&gt;<\/code>, \u0438 \u0434\u0440\u0443\u0433\u0438\u0435. \u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0441\u0442\u0430\u043b\u0430 \u201c\u0438\u043c\u0435\u0442\u044c \u0441\u043c\u044b\u0441\u043b\u201d, \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u043b\u0430 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443.<\/p>\n<p>  \u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, Web Components &mdash; \u044d\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0433. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b. \u0418\u0445 \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c, \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>  \u041a\u043e\u0434 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u0430\u043a \u043d\u0430\u0431\u043e\u0440 \u201c\u0431\u043b\u043e\u043a\u043e\u0432\u201d, \u201c\u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u043e\u0432\u201d \u0438 \u201c\u0441\u043f\u0438\u0441\u043a\u043e\u0432\u201d. \u041c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u0440\u043e\u0434\u0435 \u201c\u043c\u0435\u043d\u044e\u201d, \u201c\u043d\u043e\u0432\u043e\u0441\u0442\u043d\u0430\u044f \u043b\u0435\u043d\u0442\u0430\u201d, \u201c\u0447\u0430\u0442\u201d.<\/p>\n<p>  \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 \u0441\u044b\u0440\u043e\u0432\u0430\u0442. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0438\u043c\u043f\u043e\u0440\u0442\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043d\u0435 \u0442\u0430\u043a \u0445\u043e\u0440\u043e\u0448\u043e, \u043a\u0430\u043a \u0448\u0430\u0431\u043b\u043e\u043d\u044b. \u0418\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0440\u0443\u0448\u0438\u043b\u043e Chrome \u0432\u0440\u0435\u043c\u044f \u043e\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u041d\u043e \u043e\u0431\u044a\u0451\u043c \u043d\u043e\u0432\u043e\u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0439 \u043f\u043e\u0440\u0430\u0436\u0430\u0435\u0442. \u0414\u0430\u0436\u0435 \u0447\u0430\u0441\u0442\u044c \u044d\u0442\u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u0430 \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442\u044c \u0436\u0438\u0437\u043d\u044c web-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c. \u0410 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u0443\u0441\u043a\u043e\u0440\u044f\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432.<\/p>\n<p>  \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 Web Components \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043e\u0432. <a href=\"http:\/\/www.polymer-project.org\/\">Polymer Project<\/a> &mdash; \u044d\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0443\u0440\u043e\u0432\u043d\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 <em>Web Components<\/em>.<\/p>\n<p>  \u0192<\/p>\n<h3>\u0421\u0441\u044b\u043b\u043a\u0438<\/h3>\n<p>  <\/p>\n<ul>\n<li><a href=\"http:\/\/www.w3.org\/TR\/components-intro\/\">Web Components Intro<\/a>, W3C Working Draft<\/li>\n<li><a href=\"http:\/\/w3c.github.io\/webcomponents\/spec\/shadow\/\">Shadow DOM<\/a>, W3C Editor\u2019s Draft<\/li>\n<li><a href=\"http:\/\/filipovskii.github.io\/web-components-demo\/\">\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043a \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a><\/li>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=811542\">Bug 811542 \u2014 Implement Web Components<\/a>, Bugzilla@Mozilla<\/li>\n<\/ul>\n<p>  <a href=\"http:\/\/www.html5rocks.com\/en\/profiles\/#ericbidelman\">Eric Bidelman<\/a>, \u0441\u0435\u0440\u0438\u044f \u0441\u0442\u0430\u0442\u0435\u0439 \u0438 \u0432\u0438\u0434\u0435\u043e \u043e <em>Web Components<\/em>:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/webcomponents\/template\/\">HTML\u2019s New Template Tag: standardizing client-side<br \/>   templating<\/a><\/li>\n<li><a href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/webcomponents\/shadowdom\/\">Shadow DOM 101<\/a><\/li>\n<li><a href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/webcomponents\/shadowdom-201\">Shadow DOM 201: CSS and Styling<\/a><\/li>\n<li><a href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/webcomponents\/shadowdom-301\/\">Shadow DOM 301: Advanced Concepts &amp; DOM APIs<\/a><\/li>\n<li><a href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/webcomponents\/customelements\">Custom Elements: defining new elements in HTML<\/a><\/li>\n<li><a href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/webcomponents\/imports\/\">HTML Imports: #include for the web<\/a><\/li>\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=eJZx9c6YL8k\">&lt;web&gt;components&lt;\/web&gt; (\u0432\u0438\u0434\u0435\u043e)<\/a><\/li>\n<\/ul>\n<div class=\"clear\"><\/div>\n<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/210058\/\"> http:\/\/habrahabr.ru\/post\/210058\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">\n<div style=\"text-align:center;\"><img decoding=\"async\"  src=\"http:\/\/habr.habrastorage.org\/post_images\/4f6\/ba9\/2dc\/4f6ba92dc07661849c8bae06645315f1.png\"\/><\/div>\n<blockquote><p>\u0421\u043f\u0443\u0441\u0442\u044f \u043a\u0430\u043a\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0441\u0442\u0430\u043b\u043e \u044f\u0441\u043d\u043e, \u0447\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u0434\u0435\u044f Prototype \u0432\u043e\u0448\u043b\u0430 \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0438\u0435 \u0441 \u043c\u0438\u0440\u043e\u043c. \u0421\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u043e\u0442\u0432\u0435\u0442\u0438\u043b\u0438 \u043d\u0430 \u0432\u043e\u0437\u0440\u043e\u0436\u0434\u0435\u043d\u0438\u0435 Javascript \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u043e\u0432\u044b\u0445 API, \u043c\u043d\u043e\u0433\u0438\u0435 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432\u0430\u043b\u0438 \u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 Prototype.<\/p>\n<p>  &mdash; Sam Stephenson, \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u044c Prototype.js, <a href=\"http:\/\/sstephenson.us\/posts\/you-are-not-your-code\">You Are Not Your Code<\/a><\/p><\/blockquote>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u044e\u0442 \u0433\u0430\u0440\u043c\u043e\u043d\u0438\u0447\u043d\u043e. \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043e \u043d\u043e\u0432\u044b\u0445 API \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u0442\u0440\u0435\u043d\u0434\u043e\u0432 \u0432 opensource \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430\u0445. \u0422\u0430\u043a <em>prototype.js<\/em> \u0441\u043f\u043e\u0441\u043e\u0431\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044e <code>Array.prototype.forEach()<\/code>, <code>map()<\/code> \u0438 \u0442.\u0434., <em>jquery<\/em> \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0438\u043b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043d\u0430 <code>HTMLElement.prototype.querySelector()<\/code> \u0438 <code>querySelectorAll()<\/code>.<\/p>\n<p>  \u041a\u043e\u0434 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0438 \u043e\u0431\u044a\u0451\u043c\u043d\u0435\u0435. \u041f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0445\u0430\u0443\u0441 \u043f\u043e\u0434 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u043c. <em>Backbone<\/em>, <em>ember<\/em>, <em>angular<\/em> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u043e\u0437\u0434\u0430\u043b\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u043e\u0447\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0447\u0438\u0441\u0442\u044b\u0439, \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u0434. \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0443\u0440\u043e\u0432\u043d\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f &mdash; \u044d\u0442\u043e \u0442\u0440\u0435\u043d\u0434. \u0415\u0433\u043e \u0434\u0443\u0445 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 JS \u0441\u0440\u0435\u0434\u0435 \u0443\u0436\u0435 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f. \u041d\u0435 \u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0440\u0435\u0448\u0438\u043b\u0438 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0430 \u043d\u0435\u0433\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-210058","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/210058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=210058"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/210058\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=210058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=210058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=210058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}