{"id":231845,"date":"2014-08-10T13:37:03","date_gmt":"2014-08-10T09:37:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=231845"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=231845","title":{"rendered":"HTML-\u0438\u043c\u043f\u043e\u0440\u0442 \u2014 include \u0434\u043b\u044f \u0432\u0435\u0431\u0430: \u0447\u0430\u0441\u0442\u044c 2<\/span>"},"content":{"rendered":"
\u041f\u0435\u0440\u0435\u0432\u043e\u0434 \u0441\u0442\u0430\u0442\u044c\u0438 \u00abHTML Imports #include for the web<\/a>\u00bb, Eric Bidelman.<\/p>\n

\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0435\u0440\u0432\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430.<\/a><\/p>\n

\u041f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h3>\n

HTML-\u0438\u043c\u043f\u043e\u0440\u0442 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430. \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u044b\u0445 HTML <template><\/code><\/a>, \u0442\u0430\u043a \u0438 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0445 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/a> \u0441 \u0442\u0435\u043d\u0435\u0432\u044b\u043c DOM [1<\/a>, 2<\/a>, 3<\/a>]. \u041a\u043e\u0433\u0434\u0430 \u044d\u0442\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432\u043c\u0435\u0441\u0442\u0435, \u0438\u043c\u043f\u043e\u0440\u0442 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f<\/a> \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.
<\/a> <\/p>\n

\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432<\/h4>\n

HTML-\u0448\u0430\u0431\u043b\u043e\u043d\u044b<\/a> \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u043e\u0433\u043e, \u0433\u0434\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0438\u043c\u043f\u043e\u0440\u0442. \u0422\u044d\u0433 <template><\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u0435\u043a\u0446\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0433\u043e \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u0428\u0430\u0431\u043b\u043e\u043d\u044b \u043f\u043e\u043b\u0435\u0437\u043d\u044b \u0442\u0435\u043c, \u0447\u0442\u043e \u0438\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0434\u043e \u0438\u0445 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 JS \u043a\u043e\u0434\u0430.<\/p>\n

import.html <\/p>\n

<template>   <h1>Hello World!<\/h1>   <!-- Img is not requested until the <template> goes live. -->   <img src="">   <script>alert("Executed when the template is activated.");<\/script> <\/template> <\/code><\/pre>\n
  index.html  <\/p>\n
<head>   <link rel="import" href="import.html"> <\/head> <body>   <div id="container"><\/div>   <script>     var link = document.querySelector('link[rel="import"]');      \/\/ Clone the <template> in the import.     var template = link.import.querySelector('template');     var clone = document.importNode(template.content, true);      document.querySelector('#container').appendChild(clone);   <\/script> <\/body> <\/code><\/pre>\n
  <\/p>\n
\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/h4>\n
  \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/a> \u044d\u0442\u043e \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0441\u043e\u0447\u0435\u0442\u0430\u0435\u0442\u0441\u044f \u0441 HTML-\u0438\u043c\u043f\u043e\u0440\u0442\u043e\u043c. \u041a\u0430\u043a \u043c\u044b \u0437\u043d\u0430\u0435\u043c \u0432 \u0438\u043c\u043f\u043e\u0440\u0442\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u044b<\/a>, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0442\u044c \u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u041d\u0430\u0437\u043e\u0432\u0435\u043c \u044d\u0442\u043e \u0430\u0432\u0442\u043e\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0435\u0439.<\/p>\n
  elements.html  <\/p>\n
<script>   \/\/ Define and register <say-hi>.   var proto = Object.create(HTMLElement.prototype);    proto.createdCallback = function() {     this.innerHTML = 'Hello, <b>' +                      (this.getAttribute('name') || '?') + '<\/b>';   };    document.registerElement('say-hi', {prototype: proto});    \/\/ Define and register <shadow-element> that uses Shadow DOM.   var proto2 = Object.create(HTMLElement.prototype);    proto2.createdCallback = function() {     var root = this.createShadowRoot();     root.innerHTML = "<style>::content > *{color: red}<\/style>" +                      "I'm a " + this.localName +                      " using Shadow DOM!<content><\/content>";   };   document.registerElement('shadow-element', {prototype: proto2}); <\/script> <\/code><\/pre>\n
  \u0414\u0430\u043d\u043d\u044b\u0439 \u0438\u043c\u043f\u043e\u0440\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 (\u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442) \u0434\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430: <say-hi><\/code> \u0438 <shadow-element><\/code>. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u043f\u0440\u044f\u043c\u043e \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0449\u0435\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0435\u0434\u0443\u0441\u043b\u043e\u0432\u0438\u0439.<\/p>\n
  index.html  <\/p>\n
<head>   <link rel="import" href="elements.html"> <\/head> <body>   <say-hi name="Eric"><\/say-hi>   <shadow-element>     <div>( I'm in the light dom )<\/div>   <\/shadow-element> <\/body> <\/code><\/pre>\n
  \u041a\u0430\u043a \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442 HTML-\u0438\u043c\u043f\u043e\u0440\u0442 \u0432 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n
\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438 \u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u043c<\/h4>\n
  \u042d\u0439, \u0442\u044b, \u044f \u0432\u0438\u0436\u0443 \u0442\u0435\u0431\u0435 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u0438\u043c\u043f\u043e\u0440\u0442, \u0442\u0430\u043a \u0447\u0442\u043e \u044f \u0432\u043b\u043e\u0436\u0438\u043b \u0438\u043c\u043f\u043e\u0440\u0442 \u0432\u043d\u0443\u0442\u0440\u044c \u0438\u043c\u043f\u043e\u0440\u0442\u04301<\/sup><\/a>.<\/p>\n
\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0438\u043c\u043f\u043e\u0440\u0442<\/h5>\n
  \u0418\u043d\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0438\u043c\u043f\u043e\u0440\u0442.<\/p>\n
  \u0421\u043d\u0438\u0437\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u041f\u043e\u043b\u0438\u043c\u0435\u0440\u0430<\/a>. \u042d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 tab (<polymer-ui-tabs>)<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b layout<\/code> \u0438 selector<\/code>. \u042d\u0442\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 HTML-\u0438\u043c\u043f\u043e\u0440\u0442\u0430.<\/p>\n
  polymer-ui-tabs.html  <\/p>\n
<link rel="import" href="polymer-selector.html"> <link rel="import" href="polymer-flex-layout.html">  <polymer-element name="polymer-ui-tabs" extends="polymer-selector" ...>   <template>     <link rel="stylesheet" href="polymer-ui-tabs.css">     <polymer-flex-layout><\/polymer-flex-layout>     <shadow><\/shadow>   <\/template> <\/polymer-element> <\/code><\/pre>\n
  \u0412\u043e\u0442 \u0442\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442:  <\/p>\n
<link rel="import" href="polymer-ui-tabs.html"> <polymer-ui-tabs><\/polymer-ui-tabs> <\/code><\/pre>\n
  \u041a\u043e\u0433\u0434\u0430 \u0432\u044b\u0439\u0434\u0435\u0442 \u043d\u043e\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <polymer-selector2><\/code>, \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0434\u043c\u0435\u043d\u0438\u0442\u044c <polymer-selector><\/code> \u0438 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043d\u0430\u0447\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0443 \u0438 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c, \u044d\u0442\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0435 \u0437\u0430\u0434\u0435\u043d\u0435\u0442 \u043a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 polymer-ui-tabs<\/code>.
  <\/a>  <\/p>\n
\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438<\/h5>\n
  \u041a\u0430\u043a \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u0435\u0441\u043b\u0438 \u0434\u0432\u0430\u0436\u0434\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c JQuery, \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u043e\u0448\u0438\u0431\u043a\u0430\u043c. \u041d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043b\u0438 \u044d\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439, \u0435\u0441\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043e\u0434\u043d\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443? \u041d\u0435\u0442, \u0435\u0441\u043b\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c HTML-\u0438\u043c\u043f\u043e\u0440\u0442! \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0441\u0430\u043c\u043e \u043f\u043e \u0441\u0435\u0431\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438.<\/p>\n
  \u041e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432 \u0438\u043c\u043f\u043e\u0440\u0442, \u0432\u044b \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437\u0431\u0435\u0433\u0430\u0435\u0442\u0435 \u0438\u0445 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u043f\u0430\u0440\u0441\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437. \u0421\u043a\u0440\u0438\u043f\u0442\u044b \u0432 \u043d\u0435\u043c \u0442\u043e\u0436\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437. \u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c jquery.html, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0441\u0430\u043c JQuery.<\/p>\n
  jquery.html  <\/p>\n
<script src="http:\/\/cdn.com\/jquery.js"><\/script> <\/code><\/pre>\n
  \u0414\u0430\u043d\u043d\u044b\u0439 \u0438\u043c\u043f\u043e\u0440\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445:<\/p>\n
  import2.html  <\/p>\n
<link rel="import" href="jquery.html"> <div>Hello, I'm import 2<\/div> <\/code><\/pre>\n
  ajax-element.html  <\/p>\n
<link rel="import" href="jquery.html"> <link rel="import" href="import2.html">  <script>   var proto = Object.create(HTMLElement.prototype);    proto.makeRequest = function(url, done) {     return $.ajax(url).done(function() {       done();     });   };    document.registerElement('ajax-element', {prototype: proto}); <\/script> <\/code><\/pre>\n
  \u0415\u0441\u043b\u0438 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f, \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c jquery.html:<\/p>\n
<head>   <link rel="import" href="jquery.html">   <link rel="import" href="ajax-element.html"> <\/head> <body>  ...  <script>   $(document).ready(function() {     var el = document.createElement('ajax-element');     el.makeRequest('http:\/\/example.com');   }); <\/script> <\/body><source lang="html">  <\/code><\/pre>\n
  \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e jquery.html \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0445, \u0435\u0433\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0437\u0430\u0433\u043b\u044f\u043d\u0443\u0432 \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u044c network:<\/p>\n
  \"image\"\/<\/p>\n
\u0421\u043e\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/h3>\n
  HTML-\u0438\u043c\u043f\u043e\u0440\u0442 \u2014 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f, \u043d\u043e \u043a\u0430\u043a \u0438 \u0441 \u043b\u044e\u0431\u043e\u0439 \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0435\u0439, \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0441 \u0443\u043c\u043e\u043c \u043f\u043e\u0434\u043e\u0439\u0442\u0438 \u043a \u0435\u0451 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e. \u041b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u043e\u0442\u043c\u0435\u043d\u044f\u043b. \u0412\u043e\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0435\u0449\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0440\u0430\u0431\u043e\u0442\u0430\u044f \u0441 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u043c.<\/p>\n
\u041e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0430<\/h4>\n
  \u041e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f, \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u0438\u0445 \u0432 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0430.<\/p>\n
  Vulcanize<\/a>, \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043e\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0435\u0439 \u041f\u043e\u043b\u0438\u043c\u0435\u0440\u0430<\/a>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0438\u0437 npm. \u041e\u043d \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u0443\u044e \u0441\u0431\u043e\u0440\u043a\u0443 \u0432\u0441\u0435\u0445 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u044d\u0442\u043e, \u043f\u043e \u0441\u0443\u0442\u0438, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b. \u0414\u0430\u043d\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 \u041f\u043e\u043b\u0438\u043c\u0435\u0440\u0430<\/a>.<\/p>\n
\u0411\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0435 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0430<\/h4>\n
  HTML-\u0438\u043c\u043f\u043e\u0440\u0442 \u0442\u0430\u043a\u0436\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0418\u043c\u043f\u043e\u0440\u0442 http:\/\/cdn.com\/bootstrap.html<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u043d\u043e \u043e\u043d\u0438 \u0442\u0430\u043a \u0436\u0435 \u043a\u0435\u0448\u0438\u0440\u0443\u044e\u0442\u0441\u044f.<\/p>\n
\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e \u0432 DOM<\/h5>\n
  \u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440 \u043f\u043e\u043a\u0430 \u043e\u043d\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e \u0432 \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u0445. \u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439:<\/p>\n
var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'styles.css'; <\/code><\/pre>\n
  \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442 styles.css, \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440 \u043f\u043e\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 link<\/code> \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0432 DOM:<\/p>\n
document.head.appendChild(link); \/\/ browser requests styles.css <\/code><\/pre>\n
  \u0414\u0440\u0443\u0433\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u044d\u0442\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430:<\/p>\n
var h2 = document.createElement('h2'); h2.textContent = 'Booyah!'; <\/code><\/pre>\n
  \u042d\u043b\u0435\u043c\u0435\u043d\u0442 h2<\/code> \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442, \u043f\u043e\u043a\u0430 \u0432\u044b \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u0435 \u0435\u0433\u043e \u0432 DOM.<\/p>\n
  \u042d\u0442\u0430 \u0436\u0435 \u0438\u0434\u0435\u044f \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u0442\u0438\u043d\u043d\u043e\u0439 \u0438 \u0434\u043b\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u043a\u0430 \u0432\u044b \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u0435 \u0438\u0445 \u0432 DOM, \u043e\u043d\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u044e\u0442. \u041d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c, \u043e\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f, \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0430. \u0421\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0432 \u0438\u043c\u043f\u043e\u0440\u0442\u0435<\/a>.<\/p>\n
\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/h4>\n
  \u0418\u043c\u043f\u043e\u0440\u0442 \u043d\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u043f\u0430\u0440\u0441\u0438\u043d\u0433 \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430.<\/b> \u0421\u043a\u0440\u0438\u043f\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u043e \u043e\u0447\u0435\u0440\u0435\u0434\u0438, \u043d\u043e \u043d\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432. \u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 <head><\/code> \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u0418\u043c\u0435\u044f \u044d\u0442\u043e \u0432\u0432\u0438\u0434\u0443, \u0432\u0430\u0436\u043d\u043e \u0432\u0441\u0435 \u0436\u0435 \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0432 \u0433\u043b\u0430\u0432\u043d\u043e\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b <script><\/code>:<\/p>\n
<head>   <link rel="import" href="\/path\/to\/import_that_takes_5secs.html">   <script>console.log('I block page rendering');<\/script> <\/head> <\/code><\/pre>\n
  \u0415\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0442\u0435\u0445\u043d\u0438\u043a\u0438 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n
\u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0439 #1 (\u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439): \u0443 \u0432\u0430\u0441 \u043d\u0435\u0442 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 <head><\/code> \u0438\u043b\u0438 \u043f\u043e \u0445\u043e\u0434\u0443 \u0442\u0435\u043b\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430<\/h5>\n
  \u042f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043d\u0438\u0436\u0435, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0432\u0430\u0448\u0435\u0433\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0430. \u041d\u043e \u0432\u044b \u0432\u0435\u0434\u044c \u0438 \u0442\u0430\u043a \u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0435 \u044d\u0442\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435, \u041d\u0415 \u0422\u0410\u041a \u041b\u0418!? \ud83d\ude09<\/p>\n
  \u0432\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440:  <\/p>\n
<head>   <link rel="import" href="\/path\/to\/import.html">   <link rel="import" href="\/path\/to\/import2.html">   <!-- avoid including script --> <\/head> <body>   <!-- avoid including script -->    <div id="container"><\/div>    <!-- avoid including script -->   ...    <script>     \/\/ Other scripts n' stuff.      \/\/ Bring in the import content.     var link = document.querySelector('link[rel="import"]');     var post = link.import.querySelector('#blog-post');      var container = document.querySelector('#container');     container.appendChild(post.cloneNode(true));   <\/script> <\/body> <\/code><\/pre>\n
  \u0412\u0441\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b \u0441\u043d\u0438\u0437\u0443.<\/p>\n
\u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0439 1.5: \u0438\u043c\u043f\u043e\u0440\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e<body><\/code><\/h5>\n
  \u0414\u0440\u0443\u0433\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442\u044c \u0438\u043c\u043f\u043e\u0440\u0442\u0443 \u0441\u0430\u043c\u043e\u043c\u0443 \u0441\u0435\u0431\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c<\/a>. \u0415\u0441\u043b\u0438 \u0430\u0432\u0442\u043e\u0440 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044f \u043e \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0432 \u0433\u043b\u0430\u0432\u043d\u043e\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435, \u0442\u043e \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0441\u0430\u043c \u0441\u0435\u0431\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u043e\u0433\u043e\u0432\u043e\u0440\u0435\u043d\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445:<\/p>\n
  import.html:  <\/p>\n
<div id="blog-post">...<\/div> <script>   var me = document.currentScript.ownerDocument;   var post = me.querySelector('#blog-post');    var container = document.querySelector('#container');   container.appendChild(post.cloneNode(true)); <\/script> <\/code><\/pre>\n
  index.html  <\/p>\n
<head>   <link rel="import" href="\/path\/to\/import.html"> <\/head> <body>   <!-- no need for script. the import takes care of things --> <\/body> <\/code><\/pre>\n
  <\/p>\n
\u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0439 #2: \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 <head><\/code> \u0438\u043b\u0438 \u043f\u043e \u0445\u043e\u0434\u0443 \u0442\u0435\u043b\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430<\/h5>\n
  \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438\u043c\u043f\u043e\u0440\u0442, \u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0437\u0430 \u043d\u0438\u043c \u0441\u043a\u0440\u0438\u043f\u0442 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. Google Analytics \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 <head><\/code>. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0448\u0435\u043d\u0438\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 <head><\/code>, \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0442\u0435\u0433\u0430 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0443:<\/p>\n
<head>   <script>     function addImportLink(url) {       var link = document.createElement('link');       link.rel = 'import';       link.href = url;       link.onload = function(e) {         var post = this.import.querySelector('#blog-post');          var container = document.querySelector('#container');         container.appendChild(post.cloneNode(true));       };       document.head.appendChild(link);     }      addImportLink('\/path\/to\/import.html'); \/\/ Import is added early :)   <\/script>   <script>     \/\/ other scripts   <\/script> <\/head> <body>    <div id="container"><\/div>    ... <\/body> <\/code><\/pre>\n
  \u041a\u0430\u043a \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0435\u0441\u044c \u0438\u043c\u043f\u043e\u0440\u0442 \u0432 \u043a\u043e\u043d\u0446\u0435 <body><\/code>.<\/p>\n
<head>   <script>     \/\/ other scripts   <\/script> <\/head> <body>   <div id="container"><\/div>   ...    <script>     function addImportLink(url) { ... }      addImportLink('\/path\/to\/import.html'); \/\/ Import is added very late :(   <\/script> <\/body> <\/code><\/pre>\n
  \u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435<\/b>: \u0421\u0430\u043c\u044b\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u2014 \u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u0435\u043d. \u041f\u0430\u0440\u0441\u0435\u0440 \u043d\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e \u0441\u0430\u043c\u043e\u0433\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/i><\/p>\n
\u0427\u0442\u043e \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c<\/h3>\n
  <\/p>\n