{"id":302420,"date":"2020-04-24T09:00:12","date_gmt":"2020-04-24T09:00:12","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=302420"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=302420","title":{"rendered":"\u0412\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/company\/exness\/blog\/498560\/\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/at\/3x\/wm\/at3xwmorjkpfckmmrjqp1uncvzg.png\"><\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0410\u0440\u0442\u0443\u0440, \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u044e frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c \u0432 Exness. \u041d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e \u043c\u044b \u043f\u0435\u0440\u0435\u0432\u0435\u043b\u0438 \u043e\u0434\u0438\u043d \u0438\u0437 \u043d\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043d\u0430 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u0441 \u043a\u0430\u043a\u0438\u043c\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c\u0441\u044f, \u0438 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043c\u043d\u043e\u0433\u0438\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438, \u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438, \u043b\u0435\u0433\u043a\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. <\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u0431\u0435\u0433\u0430\u044f \u0432\u043f\u0435\u0440\u0435\u0434, \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043f\u0440\u043e\u0448\u0435\u043b \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u043d\u0430\u0448\u0435\u0439 \u0448\u0438\u0440\u043e\u043a\u043e\u0439 \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u0438, \u0430 \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u0430\u043d\u0434\u043b\u0430 \u0438 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043e\u0449\u0443\u0442\u0438\u043c\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u044e, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u043d\u043e \u0438 \u0431\u0435\u0437 \u043d\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u0441 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u0443\u0434\u043e\u0431\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>  <\/p>\n<h2 id=\"pochemu-veb-komponenty\">\u041f\u043e\u0447\u0435\u043c\u0443 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b?<\/h2>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0435\u043a\u0442 \u0431\u044b\u043b \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c, \u043d\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043a \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0431\u0430\u043d\u0434\u043b\u0430; \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 ui-\u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u043c\u0438 \u0431\u044b\u043b\u0438 \u0444\u043e\u0440\u043c\u044b. \u041a\u0442\u043e-\u0442\u043e \u0441\u043a\u0430\u0436\u0435\u0442, \u0447\u0442\u043e \u0432\u0441\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c html+js, \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u043e. \u041d\u043e \u0435\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0432\u0441\u0435\u0445 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u043e\u0434\u043e\u0431\u043d\u043e \u043f\u0440\u044b\u0436\u043a\u0443 \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u0435. \u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/github.com\/sveltejs\/svelte\">Svelte<\/a> \u0438\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"https:\/\/github.com\/preactjs\/preact\">Preact<\/a>. \u041d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0435, \u043e\u043f\u0435\u0440\u0438\u0440\u0443\u044f \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f\u043c\u0438, \u0431\u044b\u043b\u043e \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0437\u0430\u043c\u0430\u043d\u0447\u0438\u0432\u043e\u0439 \u0438\u0434\u0435\u0435\u0439. <\/p>\n<p>  <\/p>\n<h2 id=\"buduschee-uzhe-nastalo\">\u0411\u0443\u0434\u0443\u0449\u0435\u0435 \u0443\u0436\u0435 \u043d\u0430\u0441\u0442\u0430\u043b\u043e?<\/h2>\n<p>  <\/p>\n<p>\u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438. \u0414\u043b\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0435\u0441\u0442\u044c <a href=\"https:\/\/www.npmjs.com\/package\/@webcomponents\/webcomponentsjs\">\u043f\u043e\u043b\u0438\u0444\u0438\u043b\u044b<\/a>. \u041f\u0440\u0438\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0447\u0442\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043e\u0432 \u0435\u0441\u0442\u044c \u0443\u043c\u043d\u044b\u0439 <a href=\"https:\/\/www.npmjs.com\/package\/@webcomponents\/webcomponentsjs#using-webcomponents-loaderjs\">\u043b\u043e\u0430\u0434\u0435\u0440<\/a> (~2kB), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043f\u043e\u043b\u0438\u0444\u0438\u043b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430, \u0435\u0441\u043b\u0438 \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u2014 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f. \u041f\u043e\u043b\u0438\u0444\u0438\u043b\u044b \u0437\u0430\u044f\u0432\u043b\u044f\u044e\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0432\u043f\u043b\u043e\u0442\u044c \u0434\u043e IE11 \u0438 \u0441\u0442\u0430\u0440\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 Edge. \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u043c\u044b \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c IE \u0432 \u043d\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u0432 Edge \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0422\u0430\u043a\u0436\u0435 \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u043a\u0438\u0442\u0430\u0439\u0441\u043a\u0438\u0445 UC Browser \u0438 QQ Browser, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0438\u0445 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438.<\/p>\n<p>  <\/p>\n<p><em>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043e\u0432:<\/em><\/p>\n<p>  <\/p>\n<ul>\n<li><em>\u041f\u043e\u043b\u0438\u0444\u0438\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u0433 <code>&lt;slot&gt;&lt;\/slot&gt;<\/code> \u0434\u043b\u044f IE11 &amp; Edge \u043d\u0435 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u044e\u0442 \u0432\u043e \u0432\u0441\u043f\u043b\u044b\u0442\u0438\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439;<\/em><\/li>\n<li><em>\u042d\u0442\u043e\u0442 \u043d\u0430\u0431\u043e\u0440 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043e\u0432 \u043d\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0434\u043b\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 html-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043d\u0438\u0436\u0435.<\/em><\/li>\n<\/ul>\n<p>  <\/p>\n<h2 id=\"litelement\">LitElement<\/h2>\n<p>  <\/p>\n<p>\u00ab\u041a\u0430\u043a \u043c\u043d\u043e\u0433\u043e boilerplate-\u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u043e\u043f\u0441\u0430\u043c\u0438! \u041d\u0443\u0436\u043d\u043e \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441, \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044e\u0449\u0438\u0439 HTMLElement \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434\u00bb \u2014 \u0442\u0430\u043a\u043e\u0439 \u0431\u044b\u043b\u0430 \u043f\u0435\u0440\u0432\u0430\u044f \u043c\u044b\u0441\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043f\u0440\u0438 \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0432 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041f\u0438\u0441\u0430\u0442\u044c, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u2014 \u044d\u0442\u0443 \u0440\u0430\u0431\u043e\u0442\u0443 \u0431\u0435\u0440\u0435\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f \u043a\u043b\u0430\u0441\u0441 <a href=\"https:\/\/lit-element.polymer-project.org\/\">LitElement<\/a> (~7kb). \u0410 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439\u0441\u044f \u0432 \u043d\u0435\u043c <a href=\"https:\/\/lit-html.polymer-project.org\/\">lit-html<\/a> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0438 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f. <\/p>\n<p>  <\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, LitElement \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 <strong>\u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/strong> \u0443\u0434\u043e\u0431\u043d\u044b\u043c\u0438 <a href=\"https:\/\/lit-element.polymer-project.org\/guide\/lifecycle\">\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f\u043c\u0438<\/a>, \u0434\u0435\u043b\u0430\u044f \u0435\u0433\u043e \u0432\u043e \u043c\u043d\u043e\u0433\u043e\u043c \u0441\u0445\u043e\u0436\u0438\u043c \u0441 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u043c \u0446\u0438\u043a\u043b\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>LitElement \u2014 \u044d\u0442\u043e \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c, \u043a\u0442\u043e-\u0442\u043e \u0434\u0430\u0436\u0435 \u0441\u043a\u0430\u0436\u0435\u0442 \u00ab\u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u00bb. \u041d\u043e \u044f \u043e\u0441\u043e\u0437\u043d\u0430\u043d\u043d\u043e <em>\u0440\u0435\u0448\u0438\u043b\u0441\u044f \u043d\u0430 \u044d\u0442\u0438 \u043f\u043b\u044e\u0441 7kB,<\/em> \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e LitElement \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0441\u044f \u043a\u0430\u043a \u043e\u0434\u0438\u043d \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043d\u0430\u0434\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043d\u0430\u0434 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c API. \u041e\u043d\u0430 \u0442\u0430\u043a \u0438\u043b\u0438 \u0438\u043d\u0430\u0447\u0435 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0430 \u0431\u044b \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0445\u043e\u0442\u044f \u0431\u044b \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 boilerplate-\u043a\u043e\u0434\u0430.<\/p>\n<p>  <\/p>\n<h2 id=\"funkcionalnye-komponenty-shablony\">\u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b-\u0448\u0430\u0431\u043b\u043e\u043d\u044b<\/h2>\n<p>  <\/p>\n<p>\u041a \u0442\u0435\u043c\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u044d\u0442\u043e \u0438\u043c\u0435\u0435\u0442 \u043a\u043e\u0441\u0432\u0435\u043d\u043d\u043e\u0435 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435, \u043d\u043e lit-html \u0432 \u0441\u0432\u043e\u0438 ~3.5kB \u0432\u043c\u0435\u0449\u0430\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u0443\u044e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u041f\u0440\u0438\u0447\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 DOM-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440 \u0442\u0430\u043a\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e: \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u0431\u043b\u043e\u043a\u0438, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430. \u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0438 \u043f\u0440\u0438 \u0434\u043e\u043b\u0436\u043d\u043e\u0439 \u043d\u0430\u0445\u043e\u0434\u0447\u0438\u0432\u043e\u0441\u0442\u0438 \u0432\u0435\u0441\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438, \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0430\u043c\u0438 \u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430\u043c\u0438 (\u043e \u043d\u0438\u0445 \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { html, render } from 'lit-html'  const ui = data =&gt; html`...${data}...`  render(ui('Hello!'), document.body)<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432 \u043e\u0434\u043d\u0438\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const myHeader = html`&lt;h1&gt;Header&lt;\/h1&gt;` const myPage = html`   ${myHeader}   &lt;div&gt;Here's my main page.&lt;\/div&gt; `<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c \u043e\u0431\u0435\u0440\u0442\u043a\u0443 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439: <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const defineFxComponent = (tagName, FxComponent, Parent = LitElement) =&gt; {   const Component = class extends Parent {     render() {       return FxComponent(this.data)     }   }   customElements.define(tagName, Component) }  defineFxComponent('custom-ui', ui)  render(html`&lt;custom-ui .data=&quot;Hello!&quot;&gt;&lt;\/custom-ui&gt;`, document.body)<\/code><\/pre>\n<p>  <\/p>\n<p>\u042f \u043d\u0435 \u0431\u0443\u0434\u0443 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u043c \u0438 \u0446\u0438\u043a\u043b\u0438\u0447\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 lit-html. \u0412\u0441\u0435 \u044d\u0442\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432 <a href=\"https:\/\/lit-html.polymer-project.org\/guide\/writing-templates\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>. \u041e\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u044e\u0441\u044c \u043d\u0430 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0438 \u0431\u0435\u0433\u043b\u043e\u043c \u0432\u0437\u0433\u043b\u044f\u0434\u0435 \u043d\u0430 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e, \u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c.<\/p>\n<p>  <\/p>\n<h3 id=\"svg\">svg<\/h3>\n<p>  <\/p>\n<p>\u0421\u0430\u043c\u0430\u044f \u0441\u043a\u0440\u044b\u0442\u0430\u044f \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0435\u0442 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0439 \u0432 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 (\u043d\u043e \u0435\u0441\u0442\u044c \u0432 <a href=\"https:\/\/lit-html.polymer-project.org\/api\/modules\/lit_html.html#svg\">API<\/a>) \u2014 \u044d\u0442\u043e \u0442\u0435\u0433 <code>svg``<\/code>. \u041a\u0430\u043a \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u043e \u0434\u043e\u0433\u0430\u0434\u0430\u0442\u044c\u0441\u044f, \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439, \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0447\u0435\u0440\u0435\u0437 <code>html``<\/code> \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u0423 \u043c\u0435\u043d\u044f \u043e\u043d\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0438, \u043a\u043e\u0433\u0434\u0430 \u044f \u043f\u044b\u0442\u0430\u043b\u0441\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c TemplateResult (\u044d\u0442\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f <code>html``<\/code>) \u0432\u043e\u0432\u043d\u0443\u0442\u0440\u044c \u043c\u043e\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u043a\u043e\u043d\u043a\u0438 \u2014 \u043f\u043e\u044f\u0432\u043b\u044f\u043b\u0438\u0441\u044c \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0435 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0442\u0435\u0433\u0438, \u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u043d\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u043b\u0430\u0441\u044c. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>svg``<\/code> \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 SVGTemplateResult \u0432\u0441\u0435 \u0432\u0441\u0442\u0430\u043b\u043e \u043d\u0430 \u0441\u0432\u043e\u0438 \u043c\u0435\u0441\u0442\u0430. <\/p>\n<p>  <\/p>\n<h3 id=\"direktivy\">\u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b<\/h3>\n<p>  <\/p>\n<p>\u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u2014 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442 \u0442\u043e, \u043a\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0438\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435. \u0412 lit-html \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438 \u0432\u044b\u0432\u043e\u0434\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f DOM \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u044b, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 Part. \u0418\u043c\u0435\u043d\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 Part \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0443\u043c\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c, \u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u2014 \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u044d\u0442\u043e\u043c\u0443 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0443 \u0438 \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043d\u0435\u0433\u043e. <\/p>\n<p>  <\/p>\n<p>\u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043f\u044f\u0442\u0438 \u0442\u0438\u043f\u043e\u0432, \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 Part: <\/p>\n<p>  <\/p>\n<ul>\n<li>\u0414\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 (NodePart);<\/li>\n<li>\u0414\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 (AttributePart);<\/li>\n<li>\u0414\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0431\u0443\u043b\u0435\u0432\u043e\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 (BooleanAttributePart);<\/li>\n<li>\u0414\u043b\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 (PropertyPart);<\/li>\n<li>\u0414\u043b\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f (EventPart).<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0442\u0438\u043f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u043c \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043c\u0435\u0441\u0442\u0435 \u0438 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445.<\/p>\n<p>  <\/p>\n<p>\u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 \u0445\u0440\u0430\u043d\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>value<\/code> \u2014 \u044d\u0442\u043e \u0442\u043e, \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u0432\u044b\u0432\u0435\u0434\u0435\u043d\u043e \u043d\u0430 \u0435\u0435 \u043c\u0435\u0441\u0442\u0435 \u043f\u0440\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435. \u0414\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>setValue()<\/code>. \u0414\u043b\u044f \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432 DOM \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0440\u0435\u043d\u0434\u0435\u0440 \u0431\u044b\u043b \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>commit()<\/code> (\u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043f\u0440\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u0445).<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b (\u0438\u043c\u0435\u044e\u0449\u0435\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u043b\u0430\u0441\u0441\u0443 NodePart \u2014 \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0445\u0440\u0430\u043d\u0438\u0442 \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432: <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { directive } from 'lit-html'  const renderCounter = directive(() =&gt; part =&gt;   part.setValue(part.value === undefined ? 0 : part.value + 1) )<\/code><\/pre>\n<p>  <\/p>\n<p>Lit-html \u0438\u043c\u0435\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 <a href=\"https:\/\/lit-html.polymer-project.org\/guide\/template-reference#built-in-directives\">\u043d\u0430\u0431\u043e\u0440 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432<\/a>. \u0415\u0441\u0442\u044c \u0430\u043d\u0430\u043b\u043e\u0433\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0440\u0435\u0430\u043a\u0442\u043e\u0432\u0441\u043a\u0438\u0445 \u0445\u0443\u043a\u043e\u0432, \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0438 \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438 \u043a\u0430\u043a \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438, \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u0435\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 html \u0438 \u0434\u0440. <\/p>\n<p>  <\/p>\n<p>\u0420\u044f\u0434\u043e\u043c \u0441 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 state \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b. \u041f\u0440\u0438\u043c\u0435\u0440 <a href=\"https:\/\/lit-html.polymer-project.org\/guide\/creating-directives#maintaining-state\">\u0442\u0443\u0442<\/a>. <\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u0438 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0430\u043d\u0430\u043b\u043e\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u044b\u0441\u0448\u0435\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430. \u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0437\u0430\u0431\u043e\u0442\u0438\u0442\u044c\u0441\u044f \u043e \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b. \u041f\u0440\u0438\u043c\u0435\u0440 <a href=\"https:\/\/github.com\/jmas\/lit-redux\/blob\/master\/index.js\">\u0442\u0443\u0442<\/a>. <\/p>\n<p>  <\/p>\n<h3 id=\"shady-render\">shady-render<\/h3>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c lit-html \u0438 Shadow DOM, \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u044b \u0434\u043b\u044f \u0441\u0442\u0430\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. \u0423 lit-html \u0435\u0441\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 <a href=\"https:\/\/lit-html.polymer-project.org\/guide\/styling-templates#polyfilled-shadow-dom:-shadydom-and-shadycss\">\u043c\u043e\u0434\u0443\u043b\u044c shady-render<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u0442 \u044d\u0442\u0438 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u044b. <\/p>\n<p>  <\/p>\n<h2 id=\"komponenty-vysshego-poryadka\">\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u044b\u0441\u0448\u0435\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430<\/h2>\n<p>  <\/p>\n<p>HOC \u2014 \u043c\u043e\u0449\u043d\u044b\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d, \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 React \u0438\u043b\u0438 Vue. \u041f\u0440\u0438 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438 \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u043e\u0439, \u0438 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0435\u0433\u043e \u0430\u043d\u0430\u043b\u043e\u0433 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438. \u0422\u0430\u043a \u043a\u0430\u043a \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u044d\u0442\u043e \u043a\u043b\u0430\u0441\u0441\u044b, \u0442\u043e \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043d\u0430\u043b\u043e\u0433\u0430 HOC \u044f \u0440\u0435\u0448\u0438\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0438\u043c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430. <\/p>\n<p>  <\/p>\n<h3 id=\"rasshirenie-funkcionala\">\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430<\/h3>\n<p>  <\/p>\n<p>\u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u043d\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0431\u044b\u043b redux, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c <a href=\"https:\/\/github.com\/realiarthur\/lite-redux\">\u043a\u043e\u043d\u043d\u0435\u043a\u0442\u043e\u0440 \u0434\u043b\u044f \u043d\u0435\u0433\u043e<\/a>. \u041d\u0438\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043a\u043e\u0434 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0430, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0449\u0435\u0433\u043e store \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0435\u0433\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043a\u043e\u043d\u043d\u0435\u043a\u0442\u043e\u0440 redux. \u0412\u043d\u0443\u0442\u0440\u0438 \u043a\u043b\u0430\u0441\u0441\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430\u043a\u043e\u043f\u043b\u0435\u043d\u0438\u0435 mapStateToProps \u0438\u0437 \u0432\u0441\u0435\u0439 \u0446\u0435\u043f\u043e\u0447\u043a\u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f (\u0434\u043b\u044f \u0442\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u0435\u0441\u043b\u0438 \u0432 \u043d\u0435\u0439 \u0431\u0443\u0434\u0435\u0442 HOC, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u0449\u0430\u0435\u0442\u0441\u044f \u0441 redux), \u0447\u0442\u043e\u0431\u044b \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d \u0432 DOM, \u043e\u0434\u043d\u0438\u043c \u043a\u043e\u043b\u0431\u0435\u043a\u043e\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u0445 \u0432\u0441\u0435 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f redux. \u041f\u0440\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u0437 DOM \u044d\u0442\u0430 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { bindActionCreators } from 'redux'  export default store =&gt; (mapStateToProps, mapDispatchToProps) =&gt; Component =&gt;   class Connect extends Component {     constructor(props) {       super(props)       this._getPropsFromStore = this._getPropsFromStore.bind(this)       this._getInheritChainProps = this._getInheritChainProps.bind(this)        \/\/ \u041d\u0430\u043a\u043e\u043f\u043b\u0435\u043d\u0438\u0435 mapStateToProps       this._inheritChainProps = (this._inheritChainProps || []).concat(         mapStateToProps       )     }      \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 store     _getPropsFromStore(mapStateToProps) {       if (!mapStateToProps) return       const state = store.getState()       const props = mapStateToProps(state)        for (const prop in props) {         this[prop] = props[prop]       }     }      \/\/ Callback \u0434\u043b\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 store, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u0432\u0441\u0435 mapStateToProps \u0438\u0437 \u0446\u0435\u043f\u043e\u0447\u043a\u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f     _getInheritChainProps() {       this._inheritChainProps.forEach(i =&gt; this._getPropsFromStore(i))     }      connectedCallback() {       this._getPropsFromStore(mapStateToProps)        this._unsubscriber = store.subscribe(this._getInheritChainProps)        if (mapDispatchToProps) {         const dispatchers =           typeof mapDispatchToProps === 'function'             ? mapDispatchToProps(store.dispatch)             : mapDispatchToProps         for (const dispatcher in dispatchers) {           typeof mapDispatchToProps === 'function'             ? (this[dispatcher] = dispatchers[dispatcher])             : (this[dispatcher] = bindActionCreators(                 dispatchers[dispatcher],                 store.dispatch,                 () =&gt; store.getState()               ))         }       }        super.connectedCallback()     }      disconnectedCallback() {       \/\/ \u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 store       this._unsubscriber()       super.disconnectedCallback()     }   }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0423\u0434\u043e\u0431\u043d\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 store \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u043d\u0435\u043a\u0442\u043e\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u044b\u0441\u0448\u0435\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ store.js import { createStore } from 'redux' import makeConnect from 'lite-redux' import reducer from '.\/reducer'  const store = createStore(reducer)  export default store  \/\/ \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u043d\u0435\u043a\u0442\u043e\u0440\u0430 export const connect = makeConnect(store)<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ Component.js import { connect } from '.\/store'  class Component extends WhatEver {   \/* ... *\/ }  export default connect(mapStateToProps, mapDispatchToProps)(Component)<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"rasshirenie-otobrazheniya-i-nablyudaemyh-svoystv\">\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432<\/h3>\n<p>  <\/p>\n<p>\u0412\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043a\u0440\u043e\u043c\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0435\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0431\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438: <code>get observedAttributes()<\/code> \u0434\u043b\u044f \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u043b\u0438 <code>get properties()<\/code> \u0434\u043b\u044f LitElement. \u0414\u043b\u044f \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u043f\u0430\u0440\u043e\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0439 \u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const withPassword = Component =&gt;   class PasswordInput extends Component {     static get properties() {       return {         \/\/ \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0447\u0442\u043e super.properties \u0443\u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e type         ...super.properties,         addonIcon: { type: String }       }     }      constructor(props) {       super(props)       this.type = 'password'       this.addonIcon = 'invisible'     }      setType(e) {       this.type = this.type === 'text' ? 'password' : 'text'       this.addonIcon = this.type === 'password' ? 'invisible' : 'visible'     }      render() {       return html`         &lt;div class=&quot;with-addon&quot;&gt;           &lt;!-- \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 --&gt;           ${super.render()}           &lt;div @click=${this.setType}&gt;             &lt;custom-icon icon=${this.addonIcon}&gt;&lt;\/custom-icon&gt;           &lt;\/div&gt;         &lt;\/div&gt;       `     }   }  customElements.define('password-input', withPassword(TextInput))<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0437\u0434\u0435\u0441\u044c \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0443 <code>...super.properties<\/code> \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>get properties()<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0443\u0436\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0432 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u0418 \u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0443 <code>super.render()<\/code> \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>render<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0432 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0430 HOC \u0441\u0442\u043e\u0438\u0442 \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0435\u0440\u044b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u043e\u0441\u0442\u0438: <\/p>\n<p>  <\/p>\n<ul>\n<li>\u0411\u044b\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u0438 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0438\u0445 \u0432 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435;<\/li>\n<li>\u041f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 \u043a\u043b\u0430\u0441\u0441\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043b\u0431\u0435\u043a\u0430 \u043d\u0430 \u043a\u0430\u043a\u043e\u0435-\u043b\u0438\u0431\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0435\u0441\u0442\u044c \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d \u0433\u0434\u0435-\u0442\u043e \u0432 \u0446\u0435\u043f\u043e\u0447\u043a\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f, \u0438 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0438\u0437 HOC&#8217;\u043e\u0432, \u0430 \u043d\u0435 \u043e\u0431\u0430;<\/li>\n<li>\u0421\u0442\u0430\u0440\u0430\u0442\u044c\u0441\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 HOC.<\/li>\n<\/ul>\n<p>  <\/p>\n<h2 id=\"kak-ya-otkazalsya-ot-shadow-dom-i-rasshireniya-vstroennyh-elementov\">\u041a\u0430\u043a \u044f \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043e\u0442 Shadow DOM \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/h2>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u044f \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 ui-\u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u043c\u0438 \u043c\u043e\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0444\u043e\u0440\u043c\u044b \u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430. \u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u0443\u0434\u043e\u0431\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0444\u043e\u0440\u043c\u043e\u0439 \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b: \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f (values, errors, touched), \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 submit, reset. <\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f \u043a \u0442\u0435\u043c\u0435 \u0441\u0442\u0430\u0442\u044c\u0438, \u043d\u043e \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u0442\u043e\u043c, \u0432\u043e \u0447\u0442\u043e \u0435\u0433\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c. \u0417\u0430\u0431\u0435\u0433\u0430\u044f \u0432\u043f\u0435\u0440\u0435\u0434, \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u044f \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u0442\u0440\u0438 \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0438: \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;form&gt;<\/code> \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0441\u0448\u0435\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430. \u0418 \u044d\u0442\u043e \u043f\u043e\u0432\u043e\u0434 \u0434\u043b\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438\u0441\u0442\u043e\u0440\u0438\u0438&#8230;<\/p>\n<p>  <\/p>\n<h3 id=\"versiya-1-veb-komponenty-i-shadow-dom\">\u0412\u0435\u0440\u0441\u0438\u044f 1. \u0412\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 Shadow DOM<\/h3>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e \u043c\u043d\u0435 \u043d\u0430 \u0443\u043c \u2014 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u043b\u0435\u0439 \u0432\u0432\u043e\u0434\u0430 \u0438 \u0444\u043e\u0440\u043c\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f Shadow DOM \u043a\u0430\u043a \u0447\u0430\u0441\u0442\u044c \u043b\u0443\u0447\u0448\u0438\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u043a, \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0432 HOC \u0434\u043b\u044f \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0441 \u0444\u043e\u0440\u043c\u043e\u0439, \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0444\u043e\u0440\u043c\u0443 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u043c \u0442\u0435\u0433\u043e\u043c. \u041e\u0431\u043e \u0432\u0441\u0435\u043c \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443.<\/p>\n<p>  <\/p>\n<p>\u0421 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u043c\u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u0431\u044b\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0442\u0435\u0433\u0430 <code>&lt;form&gt;<\/code> \u0438 \u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 HTMLFormElement (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b\u0437\u043e\u0432 submit \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 Enter), \u043d\u043e \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0434\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u043c\u0443 \u0442\u0435\u0433\u0443 \u0444\u043e\u0440\u043c\u044b. \u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u044f \u043d\u0435 \u043c\u043e\u0433 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0442, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0432 \u0442\u0435\u0433 <code>&lt;form&gt;<\/code>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0444\u043e\u0440\u043c\u044b \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0432\u0430\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u2014 \u0432\u0438\u0434\u0438\u043c\u043e <code>&lt;form&gt;<\/code> \u043f\u043e\u043a\u0430 \u043d\u0435 \u0434\u043e \u043a\u043e\u043d\u0446\u0430 \u0433\u043e\u0442\u043e\u0432 \u043a \u0441\u043b\u043e\u0442\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f. <\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0441\u0442\u0430\u043b\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u044b. \u042d\u0442\u043e \u043d\u0435\u043a\u0438\u0439 \u0430\u043d\u0430\u043b\u043e\u0433 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 render-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 React: <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0444\u043e\u0440\u043c\u044b import { LitElement, html } from 'lit-element'  class LiteForm extends LitElement {   \/* ...\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0444\u043e\u0440\u043c\u044b ... *\/    render() {     return html`&lt;form @submit=${this.handleSubmit} method=${this.method}&gt;       ${this.formTemplate(this)}     &lt;\/form&gt;`   } }  customElements.define('lite-form', LiteForm)<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u041f\u0440\u0438\u043c\u0435\u0440 \u0444\u043e\u0440\u043c\u044b import { html, render } from 'lit-element'  const formTemplate = ({ values, handleBlur, handleChange, ...props }) =&gt;   html`&lt;input       .value=${values.firstName}       @input=${handleChange}       @blur=${handleBlur}     \/&gt;     &lt;input       .value=${values.lastName}       @input=${handleChange}       @blur=${handleBlur}     \/&gt;     &lt;button type=&quot;submit&quot;&gt;Submit&lt;\/button&gt;`  const MyForm = html`&lt;lite-form   method=&quot;POST&quot;   .formTemplate=${formTemplate}   .onSubmit=${{\/*...*\/}}   .initialValues=${{\/*...*\/}}   .validationSchema=${{\/*...*\/}} &gt;&lt;\/lite-form&gt;`  render(html`${MyForm}`, document.getElementById('root'))<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043c\u043d\u0435 \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043f\u043e\u043b\u044e \u0432\u0432\u043e\u0434\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0444\u043e\u0440\u043c\u044b. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435 \u044f \u0445\u043e\u0442\u0435\u043b \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u043c\u0438 \u043f\u043e\u043b\u044f\u043c\u0438 \u0432\u0432\u043e\u0434\u0430 \u0438 \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0432\u044b\u0432\u043e\u0434 \u043e\u0448\u0438\u0431\u043e\u043a. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043d\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b \u0431\u044b\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u044b\u0441\u0448\u0435\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0444\u043e\u0440\u043c\u043e\u0439, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <code>withField<\/code> \u0438\u043b\u0438 <code>withError<\/code>. <\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u0430, \u0447\u0442\u043e\u0431\u044b HOC&#8217;\u0438 \u0431\u044b\u043b\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0441\u0432\u043e\u044e \u0444\u043e\u0440\u043c\u0443 \u0438\u043b\u0438 \u043e\u0431\u0449\u0430\u0442\u044c\u0441\u044f \u0441 \u043d\u0435\u0439 \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0439. \u041f\u0435\u0440\u0435\u0431\u0440\u0430\u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 (\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u0448\u0438\u043d\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043e\u0431\u0449\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u2014 \u0432\u0441\u0435 \u043e\u043d\u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u043b\u0438, \u0435\u0441\u043b\u0438 \u0444\u043e\u0440\u043c\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0430), \u044f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f \u043d\u0430 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u043c, \u043d\u043e \u0440\u0430\u0431\u043e\u0447\u0435\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0437\u0434\u0435\u0441\u044c \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 IS_LITE_FORM \u2014 \u044d\u0442\u043e \u0438\u043c\u044f \u0431\u0443\u043b\u0435\u0432\u043e\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u0435\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u044b const getFormClass = element =&gt; {   const form = element.closest(`[${IS_LITE_FORM}]`)   if (form) return form    const host = element.getRootNode().host   if (!host) throw new Error('Lite-form not found')   return host[IS_LITE_FORM] ? host : getFormClass(host) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u0432\u0441\u0435 \u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u043e: \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u044b\u0439 \u043f\u043e\u0438\u0441\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u043c \u0447\u0442\u043e \u044d\u0442\u043e \u0438\u0441\u043a\u043e\u043c\u0430\u044f \u0444\u043e\u0440\u043c\u0430. \u041e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Node\/getRootNode\">getRootNode<\/a>, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u0438\u0441\u043a \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0441\u043a\u0432\u043e\u0437\u044c \u0434\u0435\u0440\u0435\u0432\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 Shadow DOM \u2014 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u0442\u0430\u043a\u0438\u0445 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447.<\/p>\n<p>  <\/p>\n<p>\u0421 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <code>withField<\/code> \u044f \u043c\u043e\u0433 \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u0444\u043e\u0440\u043c\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const formTemplate = props =&gt;   html`&lt;custom-input name=&quot;firstName&quot;&gt;&lt;\/custom-input&gt;     &lt;custom-input name=&quot;lastName&quot;&gt;&lt;\/custom-input&gt;     &lt;button type=&quot;submit&quot;&gt;Submit&lt;\/button&gt;`<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043e\u0431\u0449\u0435\u043c, \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u043e, \u043d\u043e\u2026 \u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043e\u0442 Shadow DOM, \u0435\u0449\u0435 \u043f\u0430\u0440\u0443 \u0441\u043b\u043e\u0432 \u043e \u043d\u0435\u043c.<\/p>\n<p>  <\/p>\n<h3 id=\"stilizaciya-shadow-dom-izvne-i-psevdoklassy-host-i-host-context\">\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f Shadow DOM \u0438\u0437\u0432\u043d\u0435 \u0438 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u044b :host \u0438 :host-context<\/h3>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u041e\u043d\u0438 \u043f\u0440\u043e\u043d\u0438\u043a\u0430\u044e\u0442 \u0447\u0435\u0440\u0435\u0437 Shadow DOM, \u0432\u0438\u0434\u043d\u044b \u043f\u043e\u0432\u0441\u044e\u0434\u0443, \u0438 \u044d\u0442\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u0443\u0434\u043e\u0431\u043d\u043e. \u041d\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e\u0433\u043e \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430 \u0443\u0441\u043b\u043e\u0432\u043d\u0430\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">:host([rtl]) {   text-align: right; }  :host-context(body[dir='rtl']) .text {   text-align: right; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441 <code>:host<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u044c \u043a \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u043e\u043d \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0443. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0442\u0435\u043a\u0441\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0440\u043e\u0432\u043d\u0435\u043d \u043f\u043e \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043c\u0435\u0435\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>rtl<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441 <code>:host-context<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u044c, \u0432 \u043a\u0430\u043a\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f Shadow DOM, \u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043d\u0435\u0433\u043e. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0431\u043b\u043e\u043a \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c <code>.text<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>dir<\/code>, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0434\u043b\u044f <code>body<\/code>. <\/p>\n<p>  <\/p>\n<h3 id=\"vsplytie-sobytiy-skvoz-shadow-dom\">\u0412\u0441\u043f\u043b\u044b\u0442\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0441\u043a\u0432\u043e\u0437\u044c Shadow DOM<\/h3>\n<p>  <\/p>\n<p>\u0421\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u0440\u0438 \u0432\u0441\u043f\u043b\u044b\u0442\u0438\u0438 \u0441\u043a\u0432\u043e\u0437\u044c Shadow DOM \u0432\u0435\u0434\u0443\u0442 \u0441\u0435\u0431\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u043e: \u0443 \u043d\u0438\u0445 \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0446\u0435\u043b\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>target<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0441\u0430\u043c \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0421\u0434\u0435\u043b\u0430\u043d\u043e \u044d\u0442\u043e \u0432 \u0446\u0435\u043b\u044f\u0445 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438 DOM, \u0438 \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 <code>target<\/code> \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432\u0441\u0435\u0445 \u0442\u0435\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0446\u0435\u043b\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. <\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u043f\u043b\u044b\u0442\u0438\u0435 \u0441\u043a\u0432\u043e\u0437\u044c Shadow DOM \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u044f <code>composed<\/code>. \u0427\u0442\u043e\u0431\u044b \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u043b\u043e \u0441\u043a\u0432\u043e\u0437\u044c Shadow DOM, \u043e\u0431\u0430 \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>composed<\/code> \u0438 <code>bubbles<\/code> \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u044b \u0432 <code>true<\/code>. \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u0435\u0442 \u0441\u043a\u0432\u043e\u0437\u044c Shadow DOM.<\/p>\n<p>  <\/p>\n<h3 id=\"pochemu-ya-otkazalsya-ot-shadow-dom\">\u041f\u043e\u0447\u0435\u043c\u0443 \u044f \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043e\u0442 Shadow DOM<\/h3>\n<p>  <\/p>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0438\u0437-\u0437\u0430 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0430\u0432\u0442\u043e\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c \u0445\u0440\u0430\u043d\u0438\u043c\u044b\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 (\u043b\u043e\u0433\u0438\u043d-\u043f\u0430\u0440\u043e\u043b\u044c, \u0430\u0434\u0440\u0435\u0441, \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u0440\u0435\u0434\u0438\u0442\u043d\u044b\u0445 \u043a\u0430\u0440\u0442) \u0435\u0441\u043b\u0438 \u0444\u043e\u0440\u043c\u0430 \u0438\u043b\u0438 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0441\u043a\u0440\u044b\u0442\u044b \u0437\u0430 Shadow DOM. \u0422\u0430\u043a\u0436\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0442\u0430\u043a\u0438\u0445 \u0444\u043e\u0440\u043c. \u0412 \u043c\u043e\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u044d\u0442\u043e\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a (\u0438\u043b\u0438 \u0444\u0438\u0447\u0430, \u043a\u043e\u043c\u0443 \u043a\u0430\u043a \u0431\u043b\u0438\u0436\u0435) \u0441\u0442\u0430\u043b \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u044b\u043c.<\/p>\n<p>  <\/p>\n<p><em>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0435\u0441\u043b\u0438 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0444\u043e\u0440\u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0442\u044b, \u0438 \u044d\u0442\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u043e\u043f\u0438\u0441\u0430\u043d \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043e\u043d \u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u0430\u0442\u044c, \u0442\u043e \u0430\u0432\u0442\u043e\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0434\u0430\u0436\u0435 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 Shadow DOM \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0444\u043e\u0440\u043c\u044b. \u041d\u043e \u043a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u0430 \u0444\u043e\u0440\u043c\u0430, \u0438 \u0432\u0441\u0435 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Shadow DOM. \u042d\u0442\u043e \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0438\u043b\u044c\u043d\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f, \u0447\u0442\u043e \u043f\u0440\u043e\u0449\u0435 \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 Shadow DOM.<\/em><\/p>\n<p>  <\/p>\n<p>\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0438\u0437-\u0437\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0430 querySelector, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0431\u044b \u0441\u043a\u0432\u043e\u0437\u044c Shadow DOM. \u0414\u043b\u044f \u043c\u0435\u0442\u0440\u0438\u043a \u0438 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438 \u0442\u0430\u043a\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0431\u044b\u043b \u0431\u044b \u043f\u043e\u043b\u0435\u0437\u0435\u043d, \u0447\u0442\u043e\u0431\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 Google Tag Manager \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0434\u043b\u0438\u043d\u043d\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0442\u0438\u043f\u0430 <code>document.querySelector(...) .shadowRoot.querySelector(...) .shadowRoot.querySelector(...) .shadowRoot.querySelector(...)<\/code><\/p>\n<p>  <\/p>\n<p>\u0421 \u043e\u0442\u043a\u0430\u0437\u043e\u043c \u043e\u0442 Shadow DOM \u043e\u0441\u043e\u0431\u044b\u0445 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0435\u0439 \u043d\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u043e. \u0412 LitElement \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">createRenderRoot() {   return this }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u043c\u0435\u0441\u0442\u0435 \u0441 Shadow DOM \u044f \u043f\u043e\u0442\u0435\u0440\u044f\u043b \u043f\u0440\u043e\u0432\u043e\u0434\u043d\u0438\u043a\u0430 \u0432\u0441\u043f\u043b\u044b\u0442\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f <code>blur<\/code> \u0438\u0437 \u043f\u043e\u043b\u0435\u0439 \u0432\u0432\u043e\u0434\u0430. \u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0435\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u0438 <code>withField<\/code>, \u0447\u0442\u043e\u0431\u044b \u043c\u043d\u0435 \u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u041d\u043e \u044f \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043b\u0441\u044f \u043d\u0430 \u043d\u0435\u0433\u043e \u043d\u0430 \u0441\u0442\u0430\u0434\u0438\u0438 \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u044f, \u0438 \u044d\u0442\u043e \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e.<\/p>\n<p>  <\/p>\n<h3 id=\"versiya-2-rasshirenie-vstroennogo-elementa\">\u0412\u0435\u0440\u0441\u0438\u044f 2. \u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/h3>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043e\u0442\u043a\u0430\u0437\u0430 \u043e\u0442 Shadow DOM \u043c\u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0438\u0434\u0435\u0435\u0439 \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 HTMLFormElement \u0438 \u0442\u0435\u0433 <code>&lt;form&gt;<\/code> \u2014 \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u0431\u044b \u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0430\u0441\u044c \u043a\u0430\u043a \u043d\u0430\u0442\u0438\u0432\u043d\u0430\u044f, \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0441\u044f \u0431\u044b \u0434\u043e\u0441\u0442\u0443\u043f \u043a\u043e \u0432\u0441\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c \u0444\u043e\u0440\u043c\u044b, \u0438 \u044d\u0442\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043a\u043e\u0434\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0444\u043e\u0440\u043c\u044b class LiteForm extends HTMLFormElement {   connectedCallback() {     this.addEventListener('submit', this.handleSubmit)   }    disconnectedCallback() {     this.removeEventListener('submit', this.handleSubmit)   }    \/* ...\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0444\u043e\u0440\u043c\u044b ... *\/ }  customElements.define('lite-form', LiteForm, { extends: 'form' })<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u043a\u0430\u043a \u0432 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u0435, \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043e\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u041f\u0440\u0438\u043c\u0435\u0440 \u0444\u043e\u0440\u043c\u044b const MyForm = html`&lt;form   method=&quot;POST&quot;   is=&quot;lite-form&quot;   .onSubmit=${{...}}   .initialValues=${{...}}   .validationSchema=${{...}} &gt;   &lt;custom-input name=&quot;firstName&quot;&gt;&lt;\/custom-input&gt;   &lt;custom-input name=&quot;lastName&quot;&gt;&lt;\/custom-input&gt;   &lt;button type=&quot;submit&quot;&gt;Submit&lt;\/button&gt; &lt;\/form&gt;`  render(html`${MyForm}`, document.getElementById('root'))<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>customElements.define<\/code> \u0438 \u043d\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>is<\/code> \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u0444\u043e\u0440\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043d\u0430 \u0442\u043e, \u043a\u0430\u043a\u043e\u0433\u043e \u00ab\u0442\u0438\u043f\u0430\u00bb \u0431\u0443\u0434\u0435\u0442 \u0442\u0435\u0433. \u0410 \u0442\u0430\u043a\u0436\u0435 \u043d\u0430 \u0442\u0440\u0435\u0442\u0438\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0432 <code>customElements.define<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u0430\u043a\u043e\u0439 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0435\u0433 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0438 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u0441\u043c\u043e\u0442\u0440\u0435\u043b\u043e\u0441\u044c. \u041d\u043e \u043d\u0435 \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445: Safari \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u044d\u0442\u043e \u043d\u0435\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u043c. \u042d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0434\u043b\u044f iOS (\u0432\u043a\u043b\u044e\u0447\u0430\u044f Chrome, Firefox \u0438 \u0434\u0440.). \u0425\u043e\u0434\u044f\u0442 \u0441\u043b\u0443\u0445\u0438, \u0447\u0442\u043e Apple \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0441\u043c\u043e\u0442\u0440\u0438\u0442 \u0442\u0430\u043a\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u043d\u043e \u0432 13 \u0432\u0435\u0440\u0441\u0438\u0438 Safari \u0438 iOS \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0435\u0441\u0442\u044c. \u0418 \u0445\u043e\u0442\u044f \u0435\u0441\u0442\u044c <a href=\"https:\/\/www.npmjs.com\/package\/@ungap\/custom-elements-builtin\">\u043f\u043e\u043b\u0438\u0444\u0438\u043b\u044b<\/a>, \u044f \u0440\u0435\u0448\u0438\u043b \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u044d\u0442\u043e\u0439 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0435\u0439 \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 Safari \u0438 iOS \u043d\u0435 \u043d\u0430\u0447\u043d\u0443\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<h3 id=\"versiya-3-komponent-vysshego-poryadka\">\u0412\u0435\u0440\u0441\u0438\u044f 3. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0441\u0448\u0435\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430<\/h3>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043f\u0430\u0440\u044b \u043d\u0435\u0443\u0434\u0430\u0447\u043d\u044b\u0445 \u043f\u043e\u043f\u044b\u0442\u043e\u043a \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0444\u043e\u0440\u043c\u044b \u044f \u0440\u0435\u0448\u0438\u043b \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e \u0437\u0430 \u0435\u0435 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0441\u0448\u0435\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0438\u043c \u0432\u0441\u0435, \u0447\u0442\u043e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f. \u042d\u0442\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043a\u043e\u0434\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0441\u0448\u0435\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u0444\u043e\u0440\u043c\u044b export const withForm = ({   onSubmit,   initialValues,   validationSchema,   ...config } = {}) =&gt; Component =&gt;   class LiteForm extends Component {     connectedCallback() {       this._onSubmit = (onSubmit || this.onSubmit || function () {}).bind(this)       this._initialValues = initialValues || this.initialValues || {}       this._validationSchema = validationSchema || this.validationSchema || {}       \/* ... *\/       super.connectedCallback &amp;&amp; super.connectedCallback()     }      \/* ...\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0444\u043e\u0440\u043c\u044b ... *\/   }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>connectedCallback()<\/code> \u0444\u043e\u0440\u043c\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u043e\u043d\u0444\u0438\u0433 (onSubmit, initialValues, validationSchema, \u0438 \u0434\u0440.) \u043b\u0438\u0431\u043e \u0438\u0437 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0445 \u0432 <code>withForm()<\/code>, \u043b\u0438\u0431\u043e \u0438\u0437 \u0441\u0430\u043c\u043e\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0432\u0435\u0440\u0441\u0442\u043a\u0435, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u043a\u043e\u043d\u0444\u0438\u0433 \u0432 \u043d\u0435\u0439. \u041a \u0441\u043b\u043e\u0432\u0443, \u044d\u0442\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043e\u0431\u0430 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u0430 \u0438\u0437 \u043f\u0435\u0440\u0432\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u0444\u043e\u0440\u043c\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u041f\u0440\u0438\u043c\u0435\u0440 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0438\u0437 \u043f\u0435\u0440\u0432\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0444\u043e\u0440\u043c\u044b class LiteForm extends LitElement {   render() {     return html`&lt;form @submit=${this.handleSubmit} method=${this.method}&gt;       ${this.formRender(this)}     &lt;\/form&gt;`   } }  enhance = withForm()  customElements.define('lite-form', enhance(LiteForm))<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0444\u043e\u0440\u043c\u044b, \u0438 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0432 <code>withForm()<\/code> \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0444\u043e\u0440\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u041f\u0440\u0438\u043c\u0435\u0440 \u0444\u043e\u0440\u043c\u044b class UserForm extends LitElement {   render() {     return html`       &lt;form method=&quot;POST&quot; @submit=${this.handleSubmit}&gt;         &lt;custom-input name=&quot;firstName&quot;&gt;&lt;\/custom-input&gt;         &lt;custom-input name=&quot;lastName&quot;&gt;&lt;\/custom-input&gt;         &lt;button type=&quot;submit&quot;&gt;Submit&lt;\/button&gt;       &lt;\/form&gt;     `   } }  const enhance = withForm({   initialValues: {\/*...*\/},   onSubmit: {\/*...*\/},   validationSchema: {\/*...*\/} })  customElements.define('user-form', enhance(UserForm))<\/code><\/pre>\n<p>  <\/p>\n<p>\u0420\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u043c\u043e\u0433\u0443\u0442 \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Shadow DOM, \u0442\u0430\u043a \u0438 \u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c\u0438 \u0438 \u043b\u0443\u0447\u0448\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0444\u043e\u0440\u043c\u044b \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/github.com\/realiarthur\/lite-form\">\u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u0443\u0442<\/a>.<\/p>\n<p>  <\/p>\n<h2 id=\"zaklyuchenie\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<p>\u0412 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0438 \u0441\u0442\u0430\u0442\u044c\u0438 \u00ab\u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b\u00bb \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430 \u00ab\u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b\u00bb \u2014 \u0432 \u0438\u0442\u043e\u0433\u0435 \u044d\u0442\u043e \u0441\u0442\u0430\u043b\u043e \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c API, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0438 \u0441\u0430\u043c\u043e\u0435 \u043f\u0440\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u043e\u0435 \u0438\u0437 \u0432\u0441\u0435\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438. \u041d\u043e \u043c\u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u0438 \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0447\u0430\u0441\u0442\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u043d\u0430 \u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u044b\u043c. \u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b LitElement \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e, \u0438 \u043c\u043d\u0435 \u043d\u0435 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u043b\u0441\u044f \u0435\u0433\u043e \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b \u2014 \u0445\u0432\u0430\u0442\u0430\u043b\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e. <\/p>\n<p>  <\/p>\n<p>\u0421\u043b\u043e\u0442\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043d\u043e\u0433\u043e\u043e\u0431\u0435\u0449\u0430\u044e\u0449\u0430\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u043b\u043e \u0431\u044b \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c \u0432\u043d\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 Shadow DOM (<a href=\"https:\/\/stackoverflow.com\/questions\/48726904\/is-there-a-way-workaround-to-have-the-slot-principle-in-hyperhtml-without-using\">\u0431\u0435\u0437 \u0445\u0430\u043a\u043e\u0432<\/a>). \u042d\u0442\u043e \u0434\u0430\u043b\u043e \u0431\u044b \u0448\u0438\u0440\u043e\u043a\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>Shadow DOM \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0434\u043b\u044f \u0440\u044f\u0434\u0430 \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u043d\u043e \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u044c \u0435\u0433\u043e \u043f\u043e\u0432\u0441\u0435\u043c\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u043c\u043d\u0435\u043d\u0438\u044f. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Shadow DOM \u0441\u043e\u043f\u0440\u044f\u0436\u0435\u043d\u043e \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0438 \u043d\u0435\u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430\u043c\u0438. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0434\u043b\u044f \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438 CSS \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u0430 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f DOM \u043d\u0443\u0436\u043d\u0430 \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430.<\/p>\n<p>  <\/p>\n<p>\u0425\u043e\u0442\u044f \u043f\u0440\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0435\u0449\u0435 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0440\u044f\u0434 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0445 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432, \u0432 \u0446\u0435\u043b\u043e\u043c, \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0441\u044f \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0439, \u0430 \u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u0435\u0431\u044f \u043e\u043f\u0440\u0430\u0432\u0434\u0430\u0442\u044c \u043d\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u041d\u043e \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0435 \u043a\u0430\u043a \u0437\u0430\u043c\u0435\u043d\u0443 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u043d\u0430\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0433\u0440\u0443\u043f\u043f\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u0436\u0434\u0435\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c.<\/p>\n<p>  <\/p>\n<h3 id=\"poleznye-ssylki\">\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438<\/h3>\n<p>  <\/p>\n<p><a href=\"https:\/\/www.webcomponents.org\/\">webcomponents.org,<\/a> <a href=\"https:\/\/www.polymer-project.org\/\">Polymer,<\/a> <a href=\"https:\/\/lit-element.polymer-project.org\/\">LitElement,<\/a> <a href=\"https:\/\/lit-html.polymer-project.org\/\">lit-html,<\/a> <a href=\"https:\/\/vaadin.com\/router\">Vaadin Router,<\/a> <a href=\"https:\/\/vaadin.com\/components\">Vaadin Components,<\/a> <a href=\"https:\/\/www.npmjs.com\/package\/lite-redux\">lite-redux,<\/a> <a href=\"https:\/\/www.npmjs.com\/package\/lite-form\">lite-form,<\/a> <a href=\"https:\/\/github.com\/web-padawan\/awesome-lit-html\">awesome-lit-html,<\/a> <a href=\"https:\/\/github.com\/webcomponents\/polyfills\/tree\/master\/packages\/webcomponentsjs\">Polyfills,<\/a> <a href=\"https:\/\/www.npmjs.com\/package\/@ungap\/custom-elements-builtin\">custom-elements-builtin polyfill<\/a><\/p>\n<\/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=\"https:\/\/habr.com\/ru\/company\/exness\/blog\/498560\/\"> https:\/\/habr.com\/ru\/company\/exness\/blog\/498560\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/company\/exness\/blog\/498560\/\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/at\/3x\/wm\/at3xwmorjkpfckmmrjqp1uncvzg.png\"><\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0410\u0440\u0442\u0443\u0440, \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u044e frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c \u0432 Exness. \u041d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e \u043c\u044b \u043f\u0435\u0440\u0435\u0432\u0435\u043b\u0438 \u043e\u0434\u0438\u043d \u0438\u0437 \u043d\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043d\u0430 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u0441 \u043a\u0430\u043a\u0438\u043c\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c\u0441\u044f, \u0438 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043c\u043d\u043e\u0433\u0438\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438, \u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438, \u043b\u0435\u0433\u043a\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. <\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u0431\u0435\u0433\u0430\u044f \u0432\u043f\u0435\u0440\u0435\u0434, \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043f\u0440\u043e\u0448\u0435\u043b \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u043d\u0430\u0448\u0435\u0439 \u0448\u0438\u0440\u043e\u043a\u043e\u0439 \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u0438, \u0430 \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u0430\u043d\u0434\u043b\u0430 \u0438 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043e\u0449\u0443\u0442\u0438\u043c\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c.<\/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-302420","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/302420","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=302420"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/302420\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=302420"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=302420"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=302420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}