{"id":392955,"date":"2024-06-29T10:42:47","date_gmt":"2024-06-29T10:42:47","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=392955"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=392955","title":{"rendered":"<span>\u041a\u0430\u043a \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Lit \u0432 Angular<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u2014 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 Luis Aviles &#171;<a href=\"https:\/\/www.thisdot.co\/blog\/how-to-integrate-web-components-using-lit-in-angular\" rel=\"noopener noreferrer nofollow\">How to integrate Web Components using Lit in Angular<\/a>&#171;<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u044f \u0432\u0435\u0434\u0443 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c \u043a\u0430\u043d\u0430\u043b \u201c<a href=\"https:\/\/t.me\/frontend_pasta\" rel=\"noopener noreferrer nofollow\"><u>Frontend \u043f\u043e-\u0444\u043b\u043e\u0442\u0441\u043a\u0438<\/u><\/a>\u201d, \u0433\u0434\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043f\u0440\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u0438\u0437 \u043c\u0438\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432.<\/p>\n<h2>\u0412\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u044f \u043e\u0431\u044a\u044f\u0441\u043d\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0448\u0430\u0433\u0438 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 Angular. \u0421\u043f\u043e\u0439\u043b\u0435\u0440: \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u043a\u043e\u043d\u0446\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/41c\/e2f\/9fd\/41ce2f9fd2ad1d9538667095ea69d8d1.png\" width=\"1500\" height=\"700\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/41c\/e2f\/9fd\/41ce2f9fd2ad1d9538667095ea69d8d1.png\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<p>\u0412 \u0432\u0430\u0448\u0435\u0439 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b:<\/p>\n<ul>\n<li>\n<p><strong>Node.js<\/strong>. \u0416\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0432\u0435\u0440\u0441\u0438\u044f <a href=\"https:\/\/nodejs.org\/en\/about\/releases\/\" rel=\"noopener noreferrer nofollow\">LTS<\/a>.<\/p>\n<\/li>\n<li>\n<p><strong>\u041c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043f\u0430\u043a\u0435\u0442\u043e\u0432<\/strong>. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c npm \u0438\u043b\u0438 yarn. \u0412 \u044d\u0442\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f npm.<\/p>\n<\/li>\n<\/ul>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 Angular<\/h2>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043d\u0443\u043b\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Angular CLI.<\/p>\n<pre><code class=\"bash\">ng new angular-lit-web-components --routing --prefix corp --style css --skip-tests<\/code><\/pre>\n<p>\u042d\u0442\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438:<\/p>\n<ul>\n<li>\n<p><code>--routing<\/code>. \u0411\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u043c\u043e\u0434\u0443\u043b\u044c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p><code>--prefix corp<\/code>. \u041e\u043d \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043f\u0440\u0435\u0444\u0438\u043a\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043a \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430\u043c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 <code>corp<\/code>). \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e &#8212; <code>app<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>--style css<\/code>. \u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<\/li>\n<li>\n<p><code>--skip-tests<\/code>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0444\u0430\u0439\u043b\u043e\u0432 <code>.spec.ts<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<h2>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 Lit<\/h2>\n<p><em>Lit &#8212; \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u044b\u0441\u0442\u0440\u044b\u0445 \u0438 \u043b\u0435\u0433\u043a\u0438\u0445 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/em><\/p>\n<p>Lit \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0447\u0435\u0440\u0435\u0437 npm, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0435\u0433\u043e \u043a\u0430\u043a \u043d\u043e\u0432\u0443\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<pre><code class=\"bash\">npm install --save lit<\/code><\/pre>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e Lit \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 <a href=\"https:\/\/lit.dev\/docs\/\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<h4>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 Web Components Polyfills<\/h4>\n<p>\u0415\u0441\u0442\u044c <a href=\"https:\/\/github.com\/webcomponents\/polyfills\/tree\/master\/packages\/webcomponentsjs\" rel=\"noopener noreferrer nofollow\">\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432<\/a> \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u044b \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0435\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e npm.<\/p>\n<pre><code class=\"bash\">npm install --save @webcomponents\/webcomponentsjs<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>webcomponents-loader.js<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b\u043e\u0432.<\/p>\n<h2>\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c Angular \u043a\u043e\u043d\u0444\u0438\u0433<\/h2>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0433\u0430 &lt;script> \u0432 \u0444\u0430\u0439\u043b index.html. \u041e\u0434\u043d\u0430\u043a\u043e \u0432 Angular \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0443\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0439 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0432 \u0444\u0430\u0439\u043b angular.json \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"json\">\"architect\": {   \"build\": {     ...     \"options\": {       ...       \"assets\": [         \"src\/favicon.ico\",         \"src\/assets\",         {           \"glob\": \"{*loader.js,bundles\/*.js}\",           \"input\": \"node_modules\/@webcomponents\/webcomponentsjs\",           \"output\": \"node_modules\/@webcomponents\/webcomponentsjs\"         }       ],       \"scripts\": [         \"node_modules\/@webcomponents\/webcomponentsjs\/webcomponents-loader.js\"       ]       ...     },     \"configurations\": {       ...     },       ...   },  }<\/code><\/pre>\n<p>\u0418 \u0432\u0445\u043e\u0434\u043d\u044b\u0435, \u0438 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u044c\u0441\u044f \u043a \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c\u0443 \u043f\u0443\u0442\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0422\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0438 \u0441 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u043c.<\/p>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Lit<\/h2>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0430, \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0440\u0430 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u0430\u0448 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Lit.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0430\u043f\u043a\u0443 <code>src\/web-components\/card-user<\/code>, \u0430 \u0437\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430: <code>card-user.ts<\/code> \u0438 <code>user.ts<\/code>.<\/p>\n<p>\u0424\u0430\u0439\u043b <code>user.ts<\/code> \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043e\u0431\u0449\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c Angular:<\/p>\n<pre><code class=\"javascript\">\/\/ user.ts export interface User {   id: number;   fullName: string;   role: string;   avatar?: string; }<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043a\u043e\u0434 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>card-user.ts<\/code>:<\/p>\n<pre><code class=\"javascript\">\/\/ card-user.ts  import { LitElement, html, css } from 'lit'; import { property, customElement } from 'lit\/decorators.js'; import { User } from '.\/user';  @customElement('card-user') export class CardUser extends LitElement {   static styles = css`     :host {       display: block;     }     .card {       box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.5);       max-width: 160px;     }     .card-content {       padding: 10px;     }   `;    @property({ type: Object }) user?: User = {     id: 0,     fullName: 'Luis Aviles',     role: 'Software Engineer',   };    render() {     if (this.user === undefined) {       return '';     }      return html`       &lt;div class=\"card\">         &lt;img           width=\"160px\"           src=${this.user.avatar             ? this.user.avatar             : 'assets\/images\/avatar.png'}         \/>         &lt;div class=\"card-content\">           &lt;h4>${this.user.fullName}&lt;\/h4>           &lt;p>${this.user.role}&lt;\/p>           &lt;button @click=${this.handleEdit}>Edit&lt;\/button>         &lt;\/div>       &lt;\/div>     `;   }    private handleEdit() {     this.dispatchEvent(       new CustomEvent&lt;User>('edit', {         detail: this.user,       })     );   } }<\/code><\/pre>\n<p>\u041a\u043b\u0430\u0441\u0441 <code>CardUser<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u0430\u043a \u043d\u043e\u0432\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<ul>\n<li>\n<p>\u0414\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 <code>@customElement<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0438\u043c\u044f: <code>card-user<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u0435 <code>static styles<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 \u043b\u0438\u0442\u0435\u0440\u0430\u043b\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 <code>css<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0414\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 <code>@property<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0443\u0434\u043e\u0431\u043d\u043e\u043c \u0432\u0438\u0434\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u0442\u043e\u0434 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 HTML \u0447\u0435\u0440\u0435\u0437 \u043b\u0438\u0442\u0435\u0440\u0430\u043b \u0448\u0430\u0431\u043b\u043e\u043d\u0430 <code>html<\/code>. \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Lit <a href=\"https:\/\/lit.dev\/docs\/components\/defining\/\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<h2>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 Angular<\/h2>\n<h3>\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/h3>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043b\u044e\u0431\u043e\u0433\u043e \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 Angular, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">\/\/ app.component.ts  import { Component } from '@angular\/core';  import '..\/web-components\/card-user\/card-user'; \/\/ &lt;-- import the web component  @Component({   selector: 'corp-root',   templateUrl: '.\/app.component.html',   styleUrls: ['.\/app.component.css'], }) export class AppComponent {}<\/code><\/pre>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/h3>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;card-user><\/code> \u043a\u0430\u043a \u0447\u0430\u0441\u0442\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0444\u0430\u0439\u043b\u0435 <code>app.component.html<\/code>:<\/p>\n<pre><code class=\"xml\">&lt;card-user>&lt;\/card-user><\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0435 (\u043c\u0435\u0441\u0442\u043e, \u0433\u0434\u0435 \u0432\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0435 ng serve).<\/p>\n<pre><code class=\"bash\">Error: src\/app\/app.component.html:1:1 - error NG8001: 'card-user' is not a known element: 1. If 'card-user' is an Angular component, then verify that it is part of this module. 2. If 'card-user' is a Web Component, add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.  1 &lt;card-user>&lt;\/card-user>   ~~~~~~~~~~~    src\/app\/app.component.ts:7:16     7   templateUrl: '.\/app.component.html',                      ~~~~~~~~~~~~~~~~~~~~~~     Error occurs in the template of component AppComponent.<\/code><\/pre>\n<p>\u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043d\u0430\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0444\u0430\u0439\u043b <code>app.module.ts<\/code>.<\/p>\n<pre><code class=\"javascript\">\/\/ app.module.ts  import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular\/core'; import { BrowserModule } from '@angular\/platform-browser';  import { AppRoutingModule } from '.\/app-routing.module'; import { AppComponent } from '.\/app.component';  @NgModule({   declarations: [AppComponent],   imports: [BrowserModule, AppRoutingModule],   providers: [],   bootstrap: [AppComponent],   schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AppModule {}<\/code><\/pre>\n<p>\u0412\u0430\u0436\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0437\u0434\u0435\u0441\u044c &#8212; \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>CUSTOM_ELEMENTS_SCHEMA<\/code> \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 <code>@angular\/core<\/code>, \u0430 \u0437\u0430\u0442\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>schemas<\/code>. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e\u0431 \u044d\u0442\u043e\u043c <a href=\"https:\/\/angular.io\/api\/core\/CUSTOM_ELEMENTS_SCHEMA\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0435\u0449\u0435 \u0440\u0430\u0437, \u0438 \u0432\u043e\u043b\u0448\u0435\u0431\u0441\u0442\u0432\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \ud83d\ude42<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fc3\/48c\/06e\/fc348c06e0e439c107f322b2bbeb1d82.png\" width=\"879\" height=\"628\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fc3\/48c\/06e\/fc348c06e0e439c107f322b2bbeb1d82.png\"\/><figcaption><\/figcaption><\/figure>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Property Binding<\/h3>\n<p>\u0423\u0434\u043e\u0431\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u043e \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/angular.io\/guide\/property-binding\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432<\/a>.<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>user<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>app.component.ts<\/code>:<\/p>\n<pre><code class=\"javascript\">\/\/ app.component.ts  export class AppComponent {   user: User = {     id: 2,     fullName: 'Luis',     role: 'Software Engineer',     avatar: 'https:\/\/luixaviles.com\/images\/avatar@2x.png',   }; }<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438 \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<pre><code class=\"xml\">&lt;card-user [user]=\"user\">&lt;\/card-user><\/code><\/pre>\n<p>\u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0438\u0445, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0437 \u043d\u0430\u0448\u0435\u0433\u043e \u043b\u044e\u0431\u0438\u043c\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u0430\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 <code>*ngFor<\/code>.<\/p>\n<pre><code class=\"xml\">&lt;card-user *ngFor=\"let user of users\" [user]=\"user\">&lt;\/card-user><\/code><\/pre>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Event Binding<\/h3>\n<p>\u041f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u043b\u0443\u0448\u0430\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043d\u0438\u0445 \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0432 Angular. \u041a\u0430\u043a \u0432\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u0440\u0430\u043d\u0435\u0435, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>corp-user<\/code> \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>edit<\/code> \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c\u00bb.<\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u043a\u0440\u0443\u0433\u043b\u044b\u043c\u0438 \u0441\u043a\u043e\u0431\u043a\u0430\u043c\u0438 \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u043c\u0435\u0442\u043e\u0434\u0430:<\/p>\n<pre><code class=\"xml\">&lt;card-user *ngFor=\"let user of users\" [user]=\"user\" (edit)=\"edit($event)\">&lt;\/card-user><\/code><\/pre>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0435\u0442\u043e\u0434 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435.<\/p>\n<pre><code class=\"javascript\">\/\/ app.component.ts  \/\/... export class AppComponent {   \/\/...    edit(event: Event) {     const user = (event as CustomEvent&lt;User>).detail;     console.log('Edit user', user);   } }<\/code><\/pre>\n<p>\u041c\u0435\u0442\u043e\u0434 <code>edit<\/code> \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043e\u0431\u043e\u0431\u0449\u0435\u043d\u043d\u044b\u0439 <code>Event<\/code>. \u0425\u043e\u0442\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b \u043e\u0431\u044a\u0435\u043a\u0442 <code>User<\/code> \u0447\u0435\u0440\u0435\u0437 <code>CustomEvent<\/code>. \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 <code>as<\/code> \u0438\u0437 TypeScript \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a \u043d\u0435\u043c\u0443 \u0434\u043e\u0441\u0442\u0443\u043f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 detail. \u041d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0441\u043d\u0438\u043c\u043a\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u044b \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a8a\/757\/a75\/a8a757a75b1e9e8c232046b79c478a0d.png\" width=\"1097\" height=\"671\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a8a\/757\/a75\/a8a757a75b1e9e8c232046b79c478a0d.png\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432 \u044d\u0442\u043e\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 GitHub: <a href=\"https:\/\/github.com\/luixaviles\/angular-lit-web-components\" rel=\"noopener noreferrer nofollow\">angular-lit-web-components<\/a>. \u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0437\u0432\u0435\u0437\u0434\u043e\u0447\u043a\u0443 \u2b50\ufe0f \u0438 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u043a\u043e\u0434\u043e\u043c.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \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\/articles\/583924\/\"> https:\/\/habr.com\/ru\/articles\/583924\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u2014 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 Luis Aviles &#171;<a href=\"https:\/\/www.thisdot.co\/blog\/how-to-integrate-web-components-using-lit-in-angular\" rel=\"noopener noreferrer nofollow\">How to integrate Web Components using Lit in Angular<\/a>&#171;<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u044f \u0432\u0435\u0434\u0443 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c \u043a\u0430\u043d\u0430\u043b \u201c<a href=\"https:\/\/t.me\/frontend_pasta\" rel=\"noopener noreferrer nofollow\"><u>Frontend \u043f\u043e-\u0444\u043b\u043e\u0442\u0441\u043a\u0438<\/u><\/a>\u201d, \u0433\u0434\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043f\u0440\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u0438\u0437 \u043c\u0438\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432.<\/p>\n<h2>\u0412\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u044f \u043e\u0431\u044a\u044f\u0441\u043d\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0448\u0430\u0433\u0438 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 Angular. \u0421\u043f\u043e\u0439\u043b\u0435\u0440: \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u043a\u043e\u043d\u0446\u0435.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h2>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<p>\u0412 \u0432\u0430\u0448\u0435\u0439 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b:<\/p>\n<ul>\n<li>\n<p><strong>Node.js<\/strong>. \u0416\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0432\u0435\u0440\u0441\u0438\u044f <a href=\"https:\/\/nodejs.org\/en\/about\/releases\/\" rel=\"noopener noreferrer nofollow\">LTS<\/a>.<\/p>\n<\/li>\n<li>\n<p><strong>\u041c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043f\u0430\u043a\u0435\u0442\u043e\u0432<\/strong>. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c npm \u0438\u043b\u0438 yarn. \u0412 \u044d\u0442\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f npm.<\/p>\n<\/li>\n<\/ul>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 Angular<\/h2>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043d\u0443\u043b\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Angular CLI.<\/p>\n<pre><code class=\"bash\">ng new angular-lit-web-components --routing --prefix corp --style css --skip-tests<\/code><\/pre>\n<p>\u042d\u0442\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438:<\/p>\n<ul>\n<li>\n<p><code>--routing<\/code>. \u0411\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u043c\u043e\u0434\u0443\u043b\u044c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p><code>--prefix corp<\/code>. \u041e\u043d \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043f\u0440\u0435\u0444\u0438\u043a\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043a \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430\u043c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 <code>corp<\/code>). \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e &#8212; <code>app<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>--style css<\/code>. \u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<\/li>\n<li>\n<p><code>--skip-tests<\/code>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0444\u0430\u0439\u043b\u043e\u0432 <code>.spec.ts<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<h2>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 Lit<\/h2>\n<p><em>Lit &#8212; \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u044b\u0441\u0442\u0440\u044b\u0445 \u0438 \u043b\u0435\u0433\u043a\u0438\u0445 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/em><\/p>\n<p>Lit \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0447\u0435\u0440\u0435\u0437 npm, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0435\u0433\u043e \u043a\u0430\u043a \u043d\u043e\u0432\u0443\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<pre><code class=\"bash\">npm install --save lit<\/code><\/pre>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e Lit \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 <a href=\"https:\/\/lit.dev\/docs\/\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<h4>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 Web Components Polyfills<\/h4>\n<p>\u0415\u0441\u0442\u044c <a href=\"https:\/\/github.com\/webcomponents\/polyfills\/tree\/master\/packages\/webcomponentsjs\" rel=\"noopener noreferrer nofollow\">\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432<\/a> \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u044b \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0435\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e npm.<\/p>\n<pre><code class=\"bash\">npm install --save @webcomponents\/webcomponentsjs<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>webcomponents-loader.js<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b\u043e\u0432.<\/p>\n<h2>\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c Angular \u043a\u043e\u043d\u0444\u0438\u0433<\/h2>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0433\u0430 &lt;script> \u0432 \u0444\u0430\u0439\u043b index.html. \u041e\u0434\u043d\u0430\u043a\u043e \u0432 Angular \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0443\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0439 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0432 \u0444\u0430\u0439\u043b angular.json \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"json\">\"architect\": {   \"build\": {     ...     \"options\": {       ...       \"assets\": [         \"src\/favicon.ico\",         \"src\/assets\",         {           \"glob\": \"{*loader.js,bundles\/*.js}\",           \"input\": \"node_modules\/@webcomponents\/webcomponentsjs\",           \"output\": \"node_modules\/@webcomponents\/webcomponentsjs\"         }       ],       \"scripts\": [         \"node_modules\/@webcomponents\/webcomponentsjs\/webcomponents-loader.js\"       ]       ...     },     \"configurations\": {       ...     },       ...   },  }<\/code><\/pre>\n<p>\u0418 \u0432\u0445\u043e\u0434\u043d\u044b\u0435, \u0438 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u044c\u0441\u044f \u043a \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c\u0443 \u043f\u0443\u0442\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0422\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0438 \u0441 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u043c.<\/p>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Lit<\/h2>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0430, \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0440\u0430 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u0430\u0448 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Lit.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0430\u043f\u043a\u0443 <code>src\/web-components\/card-user<\/code>, \u0430 \u0437\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430: <code>card-user.ts<\/code> \u0438 <code>user.ts<\/code>.<\/p>\n<p>\u0424\u0430\u0439\u043b <code>user.ts<\/code> \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043e\u0431\u0449\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c Angular:<\/p>\n<pre><code class=\"javascript\">\/\/ user.ts export interface User {   id: number;   fullName: string;   role: string;   avatar?: string; }<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043a\u043e\u0434 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>card-user.ts<\/code>:<\/p>\n<pre><code class=\"javascript\">\/\/ card-user.ts  import { LitElement, html, css } from 'lit'; import { property, customElement } from 'lit\/decorators.js'; import { User } from '.\/user';  @customElement('card-user') export class CardUser extends LitElement {   static styles = css`     :host {       display: block;     }     .card {       box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.5);       max-width: 160px;     }     .card-content {       padding: 10px;     }   `;    @property({ type: Object }) user?: User = {     id: 0,     fullName: 'Luis Aviles',     role: 'Software Engineer',   };    render() {     if (this.user === undefined) {       return '';     }      return html`       &lt;div class=\"card\">         &lt;img           width=\"160px\"           src=${this.user.avatar             ? this.user.avatar             : 'assets\/images\/avatar.png'}         \/>         &lt;div class=\"card-content\">           &lt;h4>${this.user.fullName}&lt;\/h4>           &lt;p>${this.user.role}&lt;\/p>           &lt;button @click=${this.handleEdit}>Edit&lt;\/button>         &lt;\/div>       &lt;\/div>     `;   }    private handleEdit() {     this.dispatchEvent(       new CustomEvent&lt;User>('edit', {         detail: this.user,       })     );   } }<\/code><\/pre>\n<p>\u041a\u043b\u0430\u0441\u0441 <code>CardUser<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u0430\u043a \u043d\u043e\u0432\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<ul>\n<li>\n<p>\u0414\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 <code>@customElement<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0438\u043c\u044f: <code>card-user<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u0435 <code>static styles<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 \u043b\u0438\u0442\u0435\u0440\u0430\u043b\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 <code>css<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0414\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 <code>@property<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0443\u0434\u043e\u0431\u043d\u043e\u043c \u0432\u0438\u0434\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u0442\u043e\u0434 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 HTML \u0447\u0435\u0440\u0435\u0437 \u043b\u0438\u0442\u0435\u0440\u0430\u043b \u0448\u0430\u0431\u043b\u043e\u043d\u0430 <code>html<\/code>. \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Lit <a href=\"https:\/\/lit.dev\/docs\/components\/defining\/\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<h2>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 Angular<\/h2>\n<h3>\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/h3>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043b\u044e\u0431\u043e\u0433\u043e \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 Angular, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">\/\/ app.component.ts  import { Component } from '@angular\/core';  import '..\/web-components\/card-user\/card-user'; \/\/ &lt;-- import the web component  @Component({   selector: 'corp-root',   templateUrl: '.\/app.component.html',   styleUrls: ['.\/app.component.css'], }) export class AppComponent {}<\/code><\/pre>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/h3>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>&lt;card-user><\/code> \u043a\u0430\u043a \u0447\u0430\u0441\u0442\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0444\u0430\u0439\u043b\u0435 <code>app.component.html<\/code>:<\/p>\n<pre><code class=\"xml\">&lt;card-user>&lt;\/card-user><\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0435 (\u043c\u0435\u0441\u0442\u043e, \u0433\u0434\u0435 \u0432\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0435 ng serve).<\/p>\n<pre><code class=\"bash\">Error: src\/app\/app.component.html:1:1 - error NG8001: 'card-user' is not a known element: 1. If 'card-user' is an Angular component, then verify that it is part of this module. 2. If 'card-user' is a Web Component, add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.  1 &lt;card-user>&lt;\/card-user>   ~~~~~~~~~~~    src\/app\/app.component.ts:7:16     7   templateUrl: '.\/app.component.html',                      ~~~~~~~~~~~~~~~~~~~~~~     Error occurs in the template of component AppComponent.<\/code><\/pre>\n<p>\u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043d\u0430\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0444\u0430\u0439\u043b <code>app.module.ts<\/code>.<\/p>\n<pre><code class=\"javascript\">\/\/ app.module.ts  import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular\/core'; import { BrowserModule } from '@angular\/platform-browser';  import { AppRoutingModule } from '.\/app-routing.module'; import { AppComponent } from '.\/app.component';  @NgModule({   declarations: [AppComponent],   imports: [BrowserModule, AppRoutingModule],   providers: [],   bootstrap: [AppComponent],   schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AppModule {}<\/code><\/pre>\n<p>\u0412\u0430\u0436\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0437\u0434\u0435\u0441\u044c &#8212; \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>CUSTOM_ELEMENTS_SCHEMA<\/code> \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 <code>@angular\/core<\/code>, \u0430 \u0437\u0430\u0442\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>schemas<\/code>. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e\u0431 \u044d\u0442\u043e\u043c <a href=\"https:\/\/angular.io\/api\/core\/CUSTOM_ELEMENTS_SCHEMA\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0435\u0449\u0435 \u0440\u0430\u0437, \u0438 \u0432\u043e\u043b\u0448\u0435\u0431\u0441\u0442\u0432\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \ud83d\ude42<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Property Binding<\/h3>\n<p>\u0423\u0434\u043e\u0431\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u043e \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/angular.io\/guide\/property-binding\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432<\/a>.<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>user<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>app.component.ts<\/code>:<\/p>\n<pre><code class=\"javascript\">\/\/ app.component.ts  export class AppComponent {   user: User = {     id: 2,     fullName: 'Luis',     role: 'Software Engineer',     avatar: 'https:\/\/luixaviles.com\/images\/avatar@2x.png',   }; }<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438 \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<pre><code class=\"xml\">&lt;card-user [user]=\"user\">&lt;\/card-user><\/code><\/pre>\n<p>\u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0438\u0445, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0437 \u043d\u0430\u0448\u0435\u0433\u043e \u043b\u044e\u0431\u0438\u043c\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u0430\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 <code>*ngFor<\/code>.<\/p>\n<pre><code class=\"xml\">&lt;card-user *ngFor=\"let user of users\" [user]=\"user\">&lt;\/card-user><\/code><\/pre>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Event Binding<\/h3>\n<p>\u041f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u043b\u0443\u0448\u0430\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043d\u0438\u0445 \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0432 Angular. \u041a\u0430\u043a \u0432\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u0440\u0430\u043d\u0435\u0435, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>corp-user<\/code> \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>edit<\/code> \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c\u00bb.<\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u043a\u0440\u0443\u0433\u043b\u044b\u043c\u0438 \u0441\u043a\u043e\u0431\u043a\u0430\u043c\u0438 \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u043c\u0435\u0442\u043e\u0434\u0430:<\/p>\n<pre><code class=\"xml\">&lt;card-user *ngFor=\"let user of users\" [user]=\"user\" (edit)=\"edit($event)\">&lt;\/card-user><\/code><\/pre>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0435\u0442\u043e\u0434 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435.<\/p>\n<pre><code class=\"javascript\">\/\/ app.component.ts  \/\/... export class AppComponent {   \/\/...    edit(event: Event) {     const user = (event as CustomEvent&lt;User>).detail;     console.log('Edit user', user);   } }<\/code><\/pre>\n<p>\u041c\u0435\u0442\u043e\u0434 <code>edit<\/code> \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043e\u0431\u043e\u0431\u0449\u0435\u043d\u043d\u044b\u0439 <code>Event<\/code>. \u0425\u043e\u0442\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b \u043e\u0431\u044a\u0435\u043a\u0442 <code>User<\/code> \u0447\u0435\u0440\u0435\u0437 <code>CustomEvent<\/code>. \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 <code>as<\/code> \u0438\u0437 TypeScript \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a \u043d\u0435\u043c\u0443 \u0434\u043e\u0441\u0442\u0443\u043f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 detail. \u041d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0441\u043d\u0438\u043c\u043a\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u044b \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h2>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432 \u044d\u0442\u043e\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 GitHub: <a href=\"https:\/\/github.com\/luixaviles\/angular-lit-web-components\" rel=\"noopener noreferrer nofollow\">angular-lit-web-components<\/a>. \u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0437\u0432\u0435\u0437\u0434\u043e\u0447\u043a\u0443 \u2b50\ufe0f \u0438 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u043a\u043e\u0434\u043e\u043c.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \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\/articles\/583924\/\"> https:\/\/habr.com\/ru\/articles\/583924\/<\/a><br \/><\/br><\/br><\/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-392955","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/392955","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=392955"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/392955\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=392955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=392955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=392955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}