{"id":31768,"date":"2023-07-24T12:32:22","date_gmt":"2023-07-24T09:02:22","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/rendering-svelte-components-as-web-components-in-angular-a-step-by-step-guide-409a\/"},"modified":"2023-07-24T12:32:22","modified_gmt":"2023-07-24T09:02:22","slug":"rendering-svelte-components-as-web-components-in-angular-a-step-by-step-guide-409a","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/rendering-svelte-components-as-web-components-in-angular-a-step-by-step-guide-409a\/","title":{"rendered":"\u0627\u0631\u0627\u0626\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627\u06cc Svelte \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0627\u062c\u0632\u0627\u06cc \u0648\u0628 \u062f\u0631 Angular: \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645"},"content":{"rendered":"<div data-article-id=\"1500814\" id=\"article-body\">\n<p>Svelte \u062f\u0631 \u062d\u0627\u0644 \u0631\u0634\u062f \u0627\u0633\u062a \u0648 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0642\u0628\u0644\u06cc State of JS \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u062f\u0631 \u0633\u0627\u0644 \u0647\u0627\u06cc \u06af\u0630\u0634\u062a\u0647 \u0628\u0647 \u0633\u0631\u0639\u062a \u0645\u0648\u0631\u062f \u062a\u0648\u062c\u0647 \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0647 \u0627\u0633\u062a:<\/p>\n<p><\/p>\n<p>\u0628\u0627 \u0622\u0645\u0648\u0632\u0634 \u062c\u0627\u0645\u0639 \u0622\u0646\u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0648\u0633\u0648\u0633\u0647 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u06cc\u06a9 \u0642\u062f\u0645 \u0641\u0631\u0627\u062a\u0631 \u0628\u0631\u062f\u0627\u0631\u06cc\u062f \u0648 \u0627\u0632 Svelte \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0627\u0642\u0639\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0627\u0646\u062a\u0642\u0627\u0644 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0627\u0645\u0644 \u0628\u0647 \u0633\u0628\u06a9 Big Bang \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0631\u0627\u0647 \u0622\u0633\u0627\u0646\u06cc \u0628\u0631\u0627\u06cc \u0641\u0631\u0648 \u0631\u0641\u062a\u0646 \u062f\u0631 \u0622\u0646 \u0646\u0628\u0627\u0634\u062f.  \u06cc\u06a9 \u0631\u0627\u0647 \u062d\u0644 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0627\u06cc\u062c\u0627\u062f \u0645\u0624\u0644\u0641\u0647 Svelte \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0648 \u0645\u0635\u0631\u0641 \u0622\u0646\u0647\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0628\u0627\u0634\u062f.<\/p>\n<p>\u0648\u0642\u062a\u06cc \u0628\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0628\u0627\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0631\u0627 \u062e\u0648\u0627\u0646\u062f\u0645\u060c \u0631\u0648\u06cc \u0627\u06cc\u0646 \u062c\u0645\u0644\u0647 \u0645\u062a\u0648\u0642\u0641 \u0634\u062f\u0645:<\/p>\n<blockquote>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0644 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 Svelte \u0628\u0633\u0627\u0632\u06cc\u062f\u060c \u06cc\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062a\u062f\u0631\u06cc\u062c\u06cc \u0628\u0647 \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0645\u0648\u062c\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f. <strong>\u0634\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0642\u0637\u0639\u0627\u062a \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0628\u0633\u062a\u0647 \u0647\u0627\u06cc \u0645\u0633\u062a\u0642\u0644 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0647\u0631 \u062c\u0627\u06cc\u06cc \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f<\/strong>\u060c \u0628\u062f\u0648\u0646 \u0633\u0631\u0628\u0627\u0631 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0628\u0647 \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0645\u0639\u0645\u0648\u0644\u06cc.<\/p>\n<\/blockquote>\n<p>\u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0622\u0634\u0646\u0627 \u0628\u0627 Angular\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0633\u062a\u0645 \u0631\u0648\u0646\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc Svelte\u060c \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u06a9\u0631\u062f\u0646 \u0622\u0646\u0647\u0627 \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062e\u0627\u0645 \u0648 \u062a\u0631\u06a9\u06cc\u0628 \u0622\u0646\u200c\u0647\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0639\u0646\u0627\u0635\u0631 \u0628\u0648\u0645\u06cc \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Angular \u0645\u0648\u062c\u0648\u062f \u0631\u0627 \u0628\u0628\u06cc\u0646\u0645 \u062a\u0627 \u0627\u06cc\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f \u0631\u0627 \u0637\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0646\u062d\u0648\u0647 \u0627\u062f\u063a\u0627\u0645 \u0627\u062c\u0632\u0627\u06cc Svelte \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Angular \u0645\u0648\u062c\u0648\u062f \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627\u06cc \u0648\u0628 \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<blockquote>\n<p><strong>\u270b \u062a\u0648\u062c\u0647<\/strong> &#8211; Svelte 4 \u0628\u0647 \u062a\u0627\u0632\u06af\u06cc \u0645\u0646\u062a\u0634\u0631 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627 \u0627\u0632 Svelte 3 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f: \u0628\u0633\u062a\u0647 \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0647\u0645\u0686\u0646\u0627\u0646 \u0627\u0632 Svelte 3 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0647\u0627\u062c\u0631\u062a \u0627\u06a9\u0646\u0648\u0646 \u06a9\u0645\u06cc \u0632\u0648\u062f\u0631\u0633 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<br \/>\u0627\u06af\u0631 \u0645\u0627\u06cc\u0644\u06cc\u062f \u062f\u0631 \u0645\u0648\u0631\u062f Svelte 4 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u06a9\u0633\u0628 \u06a9\u0646\u06cc\u062f\u060c \u0645\u0646 \u0641\u0642\u0637 \u062f\u0631 \u0645\u0648\u0631\u062f \u0622\u0646 \u0648\u0628\u0644\u0627\u06af \u0646\u0648\u0634\u062a\u0645: <\/p>\n<\/blockquote>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/rendering-svelte-components-as-web-components-in-angular-a-step-by-step-guide-409a\/#%D9%81%D9%87%D8%B1%D8%B3%D8%AA_%D9%85%D8%B7%D8%A7%D9%84%D8%A8\" >\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/rendering-svelte-components-as-web-components-in-angular-a-step-by-step-guide-409a\/#%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D9%87%D8%A7%DB%8C_%D9%88%D8%A8_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\" >\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627\u06cc \u0648\u0628 \u0686\u06cc\u0633\u062a\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/rendering-svelte-components-as-web-components-in-angular-a-step-by-step-guide-409a\/#%D9%BE%D8%B1%D9%88%DA%98%D9%87_Svelte_%D9%85%D8%A7\" >\u067e\u0631\u0648\u0698\u0647 Svelte \u0645\u0627<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/rendering-svelte-components-as-web-components-in-angular-a-step-by-step-guide-409a\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%DB%8C%DA%A9_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%AC%D8%AF%DB%8C%D8%AF\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/rendering-svelte-components-as-web-components-in-angular-a-step-by-step-guide-409a\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DB%8C%DA%A9_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_Svelte\" >\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0633\u0641\u0627\u0631\u0634\u06cc Svelte<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/rendering-svelte-components-as-web-components-in-angular-a-step-by-step-guide-409a\/#%D8%AA%D8%A8%D8%AF%DB%8C%D9%84_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_Svelte_%D8%A8%D9%87_%DB%8C%DA%A9_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D9%88%D8%A8\" >\u062a\u0628\u062f\u06cc\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Svelte \u0628\u0647 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/rendering-svelte-components-as-web-components-in-angular-a-step-by-step-guide-409a\/#%DA%A9%D8%A7%D9%85%D9%BE%D8%A7%DB%8C%D9%84_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_Svelte_%D8%A8%D9%87_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA_%D8%AE%D8%A7%D9%84%D8%B5\" >\u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Svelte \u0628\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062e\u0627\u0644\u0635<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/rendering-svelte-components-as-web-components-in-angular-a-step-by-step-guide-409a\/#%D8%A7%D8%AF%D8%BA%D8%A7%D9%85_Svelte_Web_Components_%D8%AF%D8%B1_Angular\" >\u0627\u062f\u063a\u0627\u0645 Svelte Web Components \u062f\u0631 Angular<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/rendering-svelte-components-as-web-components-in-angular-a-step-by-step-guide-409a\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%DB%8C%DA%A9_Angular_Application\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06cc\u06a9 Angular Application<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/rendering-svelte-components-as-web-components-in-angular-a-step-by-step-guide-409a\/#%D9%85%D8%B5%D8%B1%D9%81_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D9%87%D8%A7%DB%8C_%D9%88%D8%A8_Svelte_%D8%AF%D8%B1_Angular\" >\u0645\u0635\u0631\u0641 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627\u06cc \u0648\u0628 Svelte \u062f\u0631 Angular<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/rendering-svelte-components-as-web-components-in-angular-a-step-by-step-guide-409a\/#%D8%BA%D8%B0%D8%A7%DB%8C_%D8%A2%D9%85%D8%A7%D8%AF%D9%87\" >\u063a\u0630\u0627\u06cc \u0622\u0645\u0627\u062f\u0647<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%81%D9%87%D8%B1%D8%B3%D8%AA_%D9%85%D8%B7%D8%A7%D9%84%D8%A8\"><\/span>\n<p>  \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D9%87%D8%A7%DB%8C_%D9%88%D8%A8_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\"><\/span>\n<p>  \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627\u06cc \u0648\u0628 \u0686\u06cc\u0633\u062a\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0627\u0628\u062a\u062f\u0627 \u0628\u0647 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0645\u06a9\u0627\u0631\u06cc Svelte \u0648 Angular \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645\u060c \u0627\u0628\u062a\u062f\u0627 \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0686\u0633\u0628\u06cc \u06a9\u0647 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0647\u0645 \u0648\u0635\u0644 \u0645\u06cc \u06a9\u0646\u062f \u0686\u06cc\u0633\u062a: <strong>\u0627\u062c\u0632\u0627\u06cc \u0648\u0628<\/strong>.<\/p>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062a\u0648\u0633\u0637 \u0648\u0628 \u0627\u0633\u0646\u0627\u062f MDN \u0628\u06cc\u0627\u0646 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<blockquote>\n<p>Web Components \u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0627\u06cc \u0627\u0632 \u0641\u0646\u200c\u0622\u0648\u0631\u06cc\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u0639\u0646\u0627\u0635\u0631 \u0633\u0641\u0627\u0631\u0634\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f &#8211; \u0628\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f \u0622\u0646\u0647\u0627 \u062f\u0648\u0631 \u0627\u0632 \u0628\u0642\u06cc\u0647 \u06a9\u062f \u0634\u0645\u0627 &#8211; \u0648 \u0627\u0632 \u0622\u0646\u0647\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0648\u0628 \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/blockquote>\n<p>\u0647\u0633\u062a\u0647 \u0627\u0635\u0644\u06cc \u0627\u06cc\u0646 \u0641\u0646\u0627\u0648\u0631\u06cc\u060c \u0627\u06cc\u062f\u0647 \u0635\u0627\u062f\u0631\u0627\u062a \u06cc\u06a9 \u0642\u0637\u0639\u0647 HTML \u0628\u0627 \u0645\u0646\u0637\u0642 \u0622\u0646\u060c \u0648 \u0627\u0645\u06a9\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u062f\u0631 \u062c\u0627\u06cc \u062f\u06cc\u06af\u0631\u06cc \u0628\u062f\u0648\u0646 \u062a\u0631\u0633 \u0627\u0632 \u0647\u0631\u06af\u0648\u0646\u0647 \u062a\u062f\u0627\u062e\u0644 \u0628\u0627 \u06a9\u062f \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a.<\/p>\n<p>\u0627\u062c\u0632\u0627\u06cc \u0648\u0628 \u062f\u0631 \u0647\u0633\u062a\u0647 \u062e\u0648\u062f \u0633\u0647 \u0641\u0646\u0627\u0648\u0631\u06cc \u062f\u0627\u0631\u0646\u062f:<\/p>\n<ul>\n<li>\ud83e\uddea <strong>\u0639\u0646\u0627\u0635\u0631 \u0633\u0641\u0627\u0631\u0634\u06cc<\/strong> \u06a9\u0647 \u062a\u0648\u0627\u0646\u0627\u06cc\u06cc \u0627\u06cc\u062c\u0627\u062f \u0639\u0646\u0627\u0635\u0631 HTML \u062e\u0648\u062f\u0645\u0627\u0646 \u0628\u0627 \u0631\u0641\u062a\u0627\u0631\u060c \u0633\u0628\u06a9 \u0648\/\u06cc\u0627 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u062e\u0627\u0635 \u062e\u0648\u062f \u0627\u0633\u062a<\/li>\n<li>\ud83c\udf11 <strong>\u0633\u0627\u06cc\u0647 DOM<\/strong> \u06a9\u0647 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 DOM \u0645\u062d\u0644\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0639\u0645\u0644 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0647 \u0622\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062a\u0645\u0627\u0645 \u0639\u0646\u0627\u0635\u0631 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062c\u0632\u0627 \u0628\u0627 DOM \u062c\u0647\u0627\u0646\u06cc \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u062f.<\/li>\n<li>\ud83e\udde9 <strong>\u0642\u0627\u0644\u0628 \u0647\u0627\u06cc HTML<\/strong> \u06a9\u0647 \u0631\u0627\u0647\u06cc \u0628\u0631\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0627\u0632 \u062a\u06a9\u0647 \u0647\u0627\u06cc HTML \u0628\u0627 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0622\u0646\u0647\u0627 \u062f\u0631 DOM \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f<\/li>\n<\/ul>\n<p>\u062f\u0631 \u0632\u0645\u06cc\u0646\u0647 \u0645\u0627\u060c \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0639\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Svelte (\u0628\u0627 \u0642\u0627\u0644\u0628\u060c \u0633\u0628\u06a9 \u0648 \u0645\u0646\u0637\u0642 \u0622\u0646) \u0631\u0627 \u0635\u0627\u062f\u0631 \u06a9\u0646\u06cc\u0645 \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 Angular \u062e\u0648\u062f \u0631\u0647\u0627 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0639\u0627\u0644\u06cc!  \u0627\u06a9\u0646\u0648\u0646 \u06a9\u0645\u06cc \u0648\u0627\u0636\u062d \u062a\u0631 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u0628\u0647 \u06a9\u062c\u0627 \u0645\u06cc \u0631\u0648\u062f.  \u067e\u0633 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0633\u0631\u0627\u063a \u06a9\u062f \u0628\u0631\u0648\u06cc\u0645!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%BE%D8%B1%D9%88%DA%98%D9%87_Svelte_%D9%85%D8%A7\"><\/span>\n<p>  \u067e\u0631\u0648\u0698\u0647 Svelte \u0645\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0635\u0627\u062f\u0631\u0627\u062a \u0647\u0631 \u062c\u0632\u0621 Svelte\u060c \u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 SvelteKit \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062c\u062f\u06cc\u062f \u0631\u0627 \u062f\u0627\u0631\u0628\u0633\u062a \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u0634\u062a.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%DB%8C%DA%A9_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%AC%D8%AF%DB%8C%D8%AF\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 Svelte &#8220;\u0641\u0642\u0637&#8221; \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644\u0631 \u0627\u0633\u062a\u060c \u0645\u0627 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062e\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p>\u062f\u0631 \u06cc\u06a9 \u062c\u062f\u06cc\u062f <code>svelte-web-components<\/code> \u067e\u0648\u0634\u0647\u060c \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>package.json<\/code> \u0641\u0627\u06cc\u0644 \u062d\u0627\u0648\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0632\u06cc\u0631:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"p\">{<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"svelte-web-components\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"version\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"1.0.0\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"scripts\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\"> <\/span><span class=\"p\">},<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"devDependencies\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"svelte\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"^3.59.1\"<\/span><span class=\"w\">\n  <\/span><span class=\"p\">},<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"type\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"module\"<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627 \u0628\u0631\u0627\u06cc \u0631\u0641\u062a\u0646 \u0622\u0645\u0627\u062f\u0647 \u0627\u06cc\u0645!<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DB%8C%DA%A9_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_Svelte\"><\/span>\n<p>  \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0633\u0641\u0627\u0631\u0634\u06cc Svelte<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644\u060c \u0634\u0645\u0627\u0631\u0646\u062f\u0647\u200c\u0627\u06cc \u0631\u0627 \u0635\u0627\u062f\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0622\u0646 \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634\u060c \u06a9\u0627\u0647\u0634 \u06cc\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0645\u062c\u062f\u062f \u06a9\u0631\u062f.<\/p>\n<p>\u06a9\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062c\u062f\u06cc\u062f \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f <code>components\/Counter.svelte<\/code> \u0641\u0627\u06cc\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"c\">&lt;!-- components\/Counter.svelte --&gt;<\/span>\n<span class=\"nt\">&lt;script&gt;<\/span>\n  <span class=\"k\">export<\/span> <span class=\"kd\">let<\/span> <span class=\"nx\">initialValue<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"kd\">let<\/span> <span class=\"nx\">count<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">initialValue<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">$<\/span><span class=\"p\">:<\/span> <span class=\"nx\">isInitialValue<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">count<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">initialValue<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">increment<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span><span class=\"nx\">count<\/span> <span class=\"o\">+=<\/span> <span class=\"mi\">1<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">decrement<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span><span class=\"nx\">count<\/span> <span class=\"o\">-=<\/span> <span class=\"mi\">1<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">reset<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span><span class=\"nx\">count<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">initialValue<\/span><span class=\"p\">);<\/span>\n<span class=\"nt\">&lt;\/script&gt;<\/span>\n\n<span class=\"nt\">&lt;div&gt;<\/span>\n  <span class=\"nt\">&lt;span&gt;<\/span>{count}<span class=\"nt\">&lt;\/span&gt;<\/span>\n\n  <span class=\"nt\">&lt;button<\/span> <span class=\"na\">type=<\/span><span class=\"s\">\"button\"<\/span> <span class=\"na\">on:click=<\/span><span class=\"s\">{decrement}<\/span><span class=\"nt\">&gt;<\/span>-<span class=\"nt\">&lt;\/button&gt;<\/span>\n  <span class=\"nt\">&lt;button<\/span> <span class=\"na\">type=<\/span><span class=\"s\">\"button\"<\/span> <span class=\"na\">on:click=<\/span><span class=\"s\">{increment}<\/span><span class=\"nt\">&gt;<\/span>+<span class=\"nt\">&lt;\/button&gt;<\/span>\n  <span class=\"nt\">&lt;button<\/span> <span class=\"na\">type=<\/span><span class=\"s\">\"button\"<\/span> <span class=\"na\">on:click=<\/span><span class=\"s\">{reset}<\/span> <span class=\"na\">disabled=<\/span><span class=\"s\">{isInitialValue}<\/span><span class=\"nt\">&gt;<\/span>Reset<span class=\"nt\">&lt;\/button&gt;<\/span>\n<span class=\"nt\">&lt;\/div&gt;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<blockquote>\n<p>\u0627\u06af\u0631 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u062f\u060c Svelte \u06cc\u06a9 REPL \u0622\u0646\u0644\u0627\u06cc\u0646 \u062f\u0627\u0631\u062f<\/p>\n<\/blockquote>\n<p>\u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0686\u06cc\u0632\u06cc \u0645\u0634\u0627\u0628\u0647 \u0628\u0628\u06cc\u0646\u06cc\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/\u0627\u0631\u0627\u0626\u0647-\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a-\u0647\u0627\u06cc-Svelte-\u0628\u0647-\u0639\u0646\u0648\u0627\u0646-\u0627\u062c\u0632\u0627\u06cc-\u0648\u0628-\u062f\u0631-Angular.gif\" alt=\"\u0634\u0645\u0627\u0631\u0646\u062f\u0647 \u0628\u062f\u0648\u0646 \u0627\u0633\u062a\u0627\u06cc\u0644\" loading=\"lazy\" width=\"160\" height=\"60\" data-animated=\"true\" title=\"\"><\/p>\n<p>\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0633\u062a\u06cc\u0645\u060c \u0641\u0631\u0627\u0645\u0648\u0634 \u0646\u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u062f\u0631 API \u0639\u0645\u0648\u0645\u06cc \u062e\u0648\u062f \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ components\/index.js<\/span>\n<span class=\"k\">export<\/span> <span class=\"p\">{<\/span> <span class=\"k\">default<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">Counter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/Counter.svelte<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0647 \u0645\u0646\u0638\u0648\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc Svelte\u060c \u0645\u0627 \u0627\u0632 \u06cc\u06a9 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0627\u0631\u0632\u0634 \u067e\u06cc\u0634\u062e\u0648\u0627\u0646 \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0637\u0644\u0642\u0627\u064b \u0636\u0631\u0648\u0631\u06cc \u0646\u06cc\u0633\u062a\u060c \u0627\u0645\u0627 \u0628\u0647 \u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0622\u06cc\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0686\u0646\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc\u06cc \u062f\u0631 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u062c\u0632\u0621 \u0645\u0627 \u0635\u0627\u062f\u0631 \u0645\u06cc\u200c\u0634\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 \u06cc\u0627 \u062e\u06cc\u0631.<\/p>\n<p>\u0646\u0633\u062e\u0647 \u0628\u0647 \u0631\u0648\u0632 \u0634\u062f\u0647 \u0641\u0642\u0637 \u06a9\u0645\u06cc \u0645\u062a\u0641\u0627\u0648\u062a \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"c\">&lt;!-- components\/Counter.svelte --&gt;<\/span>\n<span class=\"nt\">&lt;script&gt;<\/span>\n  <span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">writable<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">svelte\/store<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"k\">export<\/span> <span class=\"kd\">let<\/span> <span class=\"nx\">initialValue<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"kd\">let<\/span> <span class=\"nx\">count<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">writable<\/span><span class=\"p\">(<\/span><span class=\"nx\">initialValue<\/span><span class=\"p\">);<\/span>\n  <span class=\"nl\">$<\/span><span class=\"p\">:<\/span> <span class=\"nx\">isInitialValue<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">$count<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">initialValue<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">increment<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">count<\/span><span class=\"p\">.<\/span><span class=\"nx\">update<\/span><span class=\"p\">((<\/span><span class=\"nx\">n<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span><span class=\"nx\">n<\/span> <span class=\"o\">+=<\/span> <span class=\"mi\">1<\/span><span class=\"p\">));<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">decrement<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">count<\/span><span class=\"p\">.<\/span><span class=\"nx\">update<\/span><span class=\"p\">((<\/span><span class=\"nx\">n<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span><span class=\"nx\">n<\/span> <span class=\"o\">-=<\/span> <span class=\"mi\">1<\/span><span class=\"p\">));<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">reset<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">count<\/span><span class=\"p\">.<\/span><span class=\"kd\">set<\/span><span class=\"p\">(<\/span><span class=\"nx\">initialValue<\/span><span class=\"p\">);<\/span>\n<span class=\"nt\">&lt;\/script&gt;<\/span>\n\n<span class=\"nt\">&lt;div&gt;<\/span>\n  <span class=\"nt\">&lt;span&gt;<\/span>{$count}<span class=\"nt\">&lt;\/span&gt;<\/span>\n\n  <span class=\"nt\">&lt;button<\/span> <span class=\"na\">type=<\/span><span class=\"s\">\"button\"<\/span> <span class=\"na\">on:click=<\/span><span class=\"s\">{decrement}<\/span><span class=\"nt\">&gt;<\/span>-<span class=\"nt\">&lt;\/button&gt;<\/span>\n  <span class=\"nt\">&lt;button<\/span> <span class=\"na\">type=<\/span><span class=\"s\">\"button\"<\/span> <span class=\"na\">on:click=<\/span><span class=\"s\">{increment}<\/span><span class=\"nt\">&gt;<\/span>+<span class=\"nt\">&lt;\/button&gt;<\/span>\n  <span class=\"nt\">&lt;button<\/span> <span class=\"na\">type=<\/span><span class=\"s\">\"button\"<\/span> <span class=\"na\">on:click=<\/span><span class=\"s\">{reset}<\/span> <span class=\"na\">disabled=<\/span><span class=\"s\">{isInitialValue}<\/span><span class=\"nt\">&gt;<\/span>Reset<span class=\"nt\">&lt;\/button&gt;<\/span>\n<span class=\"nt\">&lt;\/div&gt;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<blockquote>\n<p>\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062e\u0648\u062f \u062f\u0631 \u062c\u0627\u06cc \u062f\u06cc\u06af\u0631\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06a9\u0645\u06cc \u0622\u0646 \u0631\u0627 \u0646\u06cc\u0632 \u0633\u0628\u06a9 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0644\u0630\u062a \u0628\u062e\u0634 \u062a\u0631 \u0628\u0627\u0634\u062f.<\/p>\n<details>\n<summary>\u2728 CSS \u0627\u0636\u0627\u0641\u06cc<\/summary>\n<pre><code><span>&lt;!-- components\/Counter.svelte --&gt;<\/span>\n<span>&lt;style&gt;<\/span>\n  <span>div<\/span> <span>{<\/span>\n    <span>display<\/span><span>:<\/span> <span>flex<\/span><span>;<\/span>\n    <span>align-items<\/span><span>:<\/span> <span>center<\/span><span>;<\/span>\n    <span>gap<\/span><span>:<\/span> <span>5px<\/span><span>;<\/span>\n    <span>border<\/span><span>:<\/span> <span>1px<\/span> <span>solid<\/span> <span>#999<\/span><span>;<\/span>\n    <span>width<\/span><span>:<\/span> <span>fit-content<\/span><span>;<\/span>\n    <span>padding<\/span><span>:<\/span> <span>5px<\/span><span>;<\/span>\n    <span>border-radius<\/span><span>:<\/span> <span>5px<\/span><span>;<\/span>\n  <span>}<\/span>\n\n  <span>div<\/span> <span>span<\/span> <span>{<\/span>\n    <span>font-size<\/span><span>:<\/span> <span>18px<\/span><span>;<\/span>\n    <span>font-weight<\/span><span>:<\/span> <span>bold<\/span><span>;<\/span>\n    <span>margin<\/span><span>:<\/span> <span>0<\/span> <span>10px<\/span><span>;<\/span>\n  <span>}<\/span>\n\n  <span>div<\/span> <span>button<\/span> <span>{<\/span>\n    <span>padding<\/span><span>:<\/span> <span>5px<\/span> <span>10px<\/span><span>;<\/span>\n    <span>border<\/span><span>:<\/span> <span>1px<\/span> <span>solid<\/span> <span>#ccc<\/span><span>;<\/span>\n    <span>background-color<\/span><span>:<\/span> <span>#f0f0f0<\/span><span>;<\/span>\n    <span>color<\/span><span>:<\/span> <span>#333<\/span><span>;<\/span>\n    <span>font-size<\/span><span>:<\/span> <span>16px<\/span><span>;<\/span>\n    <span>transition<\/span><span>:<\/span> <span>background-color<\/span> <span>0.3s<\/span> <span>ease<\/span><span>;<\/span>\n    <span>border-radius<\/span><span>:<\/span> <span>5px<\/span><span>;<\/span>\n  <span>}<\/span>\n\n  <span>div<\/span> <span>button<\/span><span>:hover<\/span> <span>{<\/span>\n    <span>background-color<\/span><span>:<\/span> <span>#e0e0e0<\/span><span>;<\/span>\n  <span>}<\/span>\n\n  <span>div<\/span> <span>button<\/span><span>:active<\/span> <span>{<\/span>\n    <span>background-color<\/span><span>:<\/span> <span>#ccc<\/span><span>;<\/span>\n  <span>}<\/span>\n\n  <span>div<\/span> <span>button<\/span><span>:disabled<\/span> <span>{<\/span>\n    <span>opacity<\/span><span>:<\/span> <span>40%<\/span><span>;<\/span>\n  <span>}<\/span>\n<span>&lt;\/style&gt;<\/span>\n<\/code><\/pre>\n<blockquote>\n<\/blockquote>\n<\/details>\n<\/blockquote>\n<p>\u0645\u0624\u0644\u0641\u0647 \u0645\u0627 \u0647\u0646\u0648\u0632 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u062e\u0648\u062f \u0628\u0647 \u062e\u0648\u0628\u06cc \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1690189342_936_\u0627\u0631\u0627\u0626\u0647-\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a-\u0647\u0627\u06cc-Svelte-\u0628\u0647-\u0639\u0646\u0648\u0627\u0646-\u0627\u062c\u0632\u0627\u06cc-\u0648\u0628-\u062f\u0631-Angular.gif\" alt=\"\u067e\u06cc\u0634\u062e\u0648\u0627\u0646 \u0645\u062f\u0644 \u062f\u0627\u0631\" loading=\"lazy\" width=\"276\" height=\"66\" data-animated=\"true\" title=\"\"><\/p>\n<p>\u062f\u0631 \u0648\u0627\u0642\u0639\u060c \u0622\u0646\u0642\u062f\u0631 \u062e\u0648\u0628 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u062e\u0648\u0627\u0647\u0645 \u0627\u0632 \u0622\u0646 \u062e\u0627\u0631\u062c \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0645\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u0646 \u0627\u062a\u0641\u0627\u0642 \u0628\u06cc\u0641\u062a\u062f!<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AA%D8%A8%D8%AF%DB%8C%D9%84_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_Svelte_%D8%A8%D9%87_%DB%8C%DA%A9_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D9%88%D8%A8\"><\/span>\n<p>  \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Svelte \u0628\u0647 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0642\u0628\u0644\u0627 \u062f\u06cc\u062f\u06cc\u0645\u060c \u0631\u0627\u0647\u06cc \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u0627 \u062f\u0631 \u062e\u0627\u0631\u062c \u0627\u0632 \u0627\u06cc\u0646 \u0645\u062d\u06cc\u0637\u060c \u062a\u0628\u062f\u06cc\u0644 \u0622\u0646 \u0628\u0647 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u0627\u0633\u062a.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0686\u06a9 \u0644\u06cc\u0633\u062a \u0631\u0627 \u0645\u0631\u0648\u0631 \u06a9\u0646\u06cc\u0645 \u0648 \u0628\u0628\u06cc\u0646\u06cc\u0645 \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u0686\u0647 \u0686\u06cc\u0632\u06cc \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645:<\/p>\n<ul>\n<li>\u274c <del>\ud83e\uddea \u0639\u0646\u0627\u0635\u0631 \u0633\u0641\u0627\u0631\u0634\u06cc<\/del>\n<\/li>\n<li>\u2705 \ud83c\udf11 Shadow DOM<\/li>\n<li>\u2705 \ud83e\udde9 \u0642\u0627\u0644\u0628 \u0647\u0627\u06cc HTML<\/li>\n<\/ul>\n<p>\u0645\u0627 \u062a\u0642\u0631\u06cc\u0628\u0627 \u0627\u06cc\u0646\u062c\u0627 \u0647\u0633\u062a\u06cc\u0645!<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0639\u0646\u0635\u0631 HTML \u0633\u0641\u0627\u0631\u0634\u06cc \u062e\u0648\u062f\u060c \u0628\u0627\u06cc\u062f \u06cc\u06a9\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062e\u0648\u062f \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0648\u06cc\u0698\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 <code>&lt;svelte:options&gt;<\/code> \u0639\u0646\u0635\u0631\u06cc \u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0627\u0632 \u06a9\u062f\u0627\u0645 \u0628\u0631\u0686\u0633\u0628 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"c\">&lt;!-- components\/Counter.svelte --&gt;<\/span>\n<span class=\"nt\">&lt;svelte:options<\/span> <span class=\"na\">tag=<\/span><span class=\"s\">\"svelte-counter\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n\n<span class=\"c\">&lt;!-- Counter component code here --&gt;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u062e\u0648\u062f \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645 <code>Counter<\/code> \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc \u06a9\u0647 \u0647\u0631 \u0633\u0647 \u0627\u0644\u0632\u0627\u0645\u0627\u062a \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0648\u0628 \u0631\u0627 \u0628\u0631\u0622\u0648\u0631\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%DA%A9%D8%A7%D9%85%D9%BE%D8%A7%DB%8C%D9%84_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_Svelte_%D8%A8%D9%87_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA_%D8%AE%D8%A7%D9%84%D8%B5\"><\/span>\n<p>  \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Svelte \u0628\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062e\u0627\u0644\u0635<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u062c\u0632\u0621 \u0645\u0627 \u0622\u0645\u0627\u062f\u0647 \u0635\u0627\u062f\u0631\u0627\u062a \u0627\u0633\u062a\u060c \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0627 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u06a9\u0631\u062f\u0646 \u0622\u0646 \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062e\u0627\u0644\u0635 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0627\u0632 esbuild \u0628\u0647 \u0628\u0627\u0646\u062f\u0644 \u06cc\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0645\u0627 \u0628\u0627\u06cc\u062f \u062f\u0648 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u062f\u06cc\u06af\u0631 \u0631\u0627 \u0628\u06af\u06cc\u0631\u06cc\u0645: <code>esbuild<\/code> \u0648 <code>esbuild-svelte<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm i <span class=\"nt\">-D<\/span> esbuild esbuild-svelte\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0633\u067e\u0633 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u06cc\u06a9 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0646\u0642\u0637\u0647 \u0648\u0631\u0648\u062f\u06cc \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0645\u0627 \u0631\u0627 \u0628\u062e\u0648\u0627\u0646\u062f \u0648 \u0646\u062a\u06cc\u062c\u0647 JS \u0631\u0627 \u062e\u0631\u0648\u062c\u06cc \u06a9\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ esbuild-bundle.js<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">esbuild<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">esbuild<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">sveltePlugin<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">esbuild-svelte<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"nx\">esbuild<\/span>\n  <span class=\"p\">.<\/span><span class=\"nx\">build<\/span><span class=\"p\">({<\/span>\n    <span class=\"na\">entryPoints<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">.\/components<\/span><span class=\"dl\">\"<\/span><span class=\"p\">],<\/span>\n    <span class=\"na\">bundle<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">outfile<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">dist\/web-components.js<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">plugins<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n      <span class=\"nx\">sveltePlugin<\/span><span class=\"p\">(),<\/span>\n    <span class=\"p\">],<\/span>\n    <span class=\"na\">logLevel<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">info<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">})<\/span>\n  <span class=\"p\">.<\/span><span class=\"k\">catch<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">exit<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">));<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0645\u0627 \u0628\u0627\u06cc\u062f \u0628\u0647 eslint \u0628\u06af\u0648\u06cc\u06cc\u0645 \u06a9\u0647 \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0633\u0627\u062e\u062a \u0627\u062c\u0632\u0627\u06cc \u0648\u0628 \u0647\u0633\u062a\u06cc\u0645\u060c \u0646\u0647 \u0627\u06cc\u0646\u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u0635\u0631\u0641\u0627\u064b \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight diff\"><code><span class=\"p\">esbuild\n<\/span>  .build({\n    entryPoints: [\".\/components\"],\n    bundle: true,\n    outfile: \"dist\/web-components.js\",\n    plugins: [\n      sveltePlugin({\n<span class=\"gi\">+       compilerOptions: {\n+         customElement: true,\n+       },\n<\/span>      }),\n    ],\n    logLevel: \"info\",\n  })\n  .catch(() =&gt; process.exit(1));\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0627\u062c\u0631\u0627\u06cc \u0622\u0646 \u06a9\u0645\u06cc \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0634\u0648\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u06cc\u06a9 \u0648\u0631\u0648\u062f\u06cc \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 <code>scripts<\/code> \u0627\u0632 \u0645\u0627 <code>package.json<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight diff\"><code><span class=\"err\">{<\/span>\n  \"name\": \"svelte-web-components\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n<span class=\"gi\">+   \"build\": \"node esbuild-bundle.js\"\n<\/span>  },\n  \"devDependencies\": {\n    \"esbuild\": \"^0.18.2\",\n    \"esbuild-svelte\": \"^0.7.3\",\n    \"svelte\": \"^3.59.1\"\n  },\n  \"type\": \"module\"\n<span class=\"err\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u0645 <code>npm run build<\/code> \u0648 \u062e\u0631\u0648\u062c\u06cc \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1690189342_80_\u0627\u0631\u0627\u0626\u0647-\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a-\u0647\u0627\u06cc-Svelte-\u0628\u0647-\u0639\u0646\u0648\u0627\u0646-\u0627\u062c\u0632\u0627\u06cc-\u0648\u0628-\u062f\u0631-Angular.png\" alt=\"\u062e\u0631\u0648\u062c\u06cc ESBuild\" loading=\"lazy\" width=\"800\" height=\"166\" title=\"\"><\/p>\n<p>\u0645\u0627 \u0628\u0627\u06cc\u062f \u062e\u0631\u0648\u062c\u06cc \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0632\u06cc\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645 <code>dist\/web-components.js<\/code> \u062d\u0627\u0648\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u0645\u0627 \ud83d\udce6<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AF%D8%BA%D8%A7%D9%85_Svelte_Web_Components_%D8%AF%D8%B1_Angular\"><\/span>\n<p>  \u0627\u062f\u063a\u0627\u0645 Svelte Web Components \u062f\u0631 Angular<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0627 \u0622\u0645\u0627\u062f\u0647 \u0628\u0648\u062f\u0646 \u0628\u0633\u062a\u0647 \u0645\u0627\u060c \u0641\u0642\u0637 \u0645\u0635\u0631\u0641 \u0622\u0646 \u0628\u0627\u0642\u06cc \u0645\u06cc \u0645\u0627\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%DB%8C%DA%A9_Angular_Application\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06cc\u06a9 Angular Application<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0628\u0648\u062a \u0627\u0633\u062a\u0631\u067e \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 Angular \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>ng new angular-wrapper <span class=\"nt\">--standalone<\/span> <span class=\"nt\">--defaults<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648 \u062a\u0648\u0644\u06cc\u062f \u0634\u062f\u0647 \u0631\u0627 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f <code>app.component.ts<\/code> \u0628\u0627 \u06a9\u062f \u0632\u06cc\u0631:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Component<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@angular\/core<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">selector<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">app-root<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">standalone<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">template<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`\n    &lt;h1&gt;Svelte in Angular!&lt;\/h1&gt;\n  `<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">AppComponent<\/span> <span class=\"p\">{}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 Angular \u0645\u0627 \u0622\u0645\u0627\u062f\u0647 \u0627\u0633\u062a \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 Svelte \u0645\u0627 \u0646\u06cc\u0632 \u0622\u0645\u0627\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u0646 \u0631\u0627 \u0633\u06cc\u0645 \u06a9\u0634\u06cc \u06a9\u0646\u06cc\u0645!<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B5%D8%B1%D9%81_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D9%87%D8%A7%DB%8C_%D9%88%D8%A8_Svelte_%D8%AF%D8%B1_Angular\"><\/span>\n<p>  \u0645\u0635\u0631\u0641 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627\u06cc \u0648\u0628 Svelte \u062f\u0631 Angular<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 Angular \u0627\u0632 \u0628\u0633\u062a\u0647 JS \u062e\u0627\u0631\u062c\u06cc \u062e\u0648\u062f \u0622\u06af\u0627\u0647 \u0634\u0648\u062f\u060c \u0628\u0627\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0622\u0646\u060c \u0627\u0632 \u0642\u0628\u0644 \u062a\u0648\u0644\u06cc\u062f \u0634\u062f\u0647 \u0631\u0627 \u0628\u06af\u06cc\u0631\u06cc\u062f <code>web-components.js<\/code> \u0641\u0627\u06cc\u0644 \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u062c\u062f\u06cc\u062f \u062f\u0631 \u0631\u06cc\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 Angular \u062e\u0648\u062f\u060c \u062f\u0631 \u0632\u06cc\u0631 \u0631\u0647\u0627 \u06a9\u0646\u06cc\u062f <code>src\/scripts<\/code>:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1690189342_286_\u0627\u0631\u0627\u0626\u0647-\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a-\u0647\u0627\u06cc-Svelte-\u0628\u0647-\u0639\u0646\u0648\u0627\u0646-\u0627\u062c\u0632\u0627\u06cc-\u0648\u0628-\u062f\u0631-Angular.png\" alt=\"\u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0648\u0634\u0647 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc\" loading=\"lazy\" width=\"308\" height=\"535\" title=\"\"><\/p>\n<p>\u0648 \u0627\u0631\u062c\u0627\u0639 \u0628\u0647 \u0622\u0646 \u062f\u0631 <code>angular.json<\/code> \u0641\u0627\u06cc\u0644 \u062f\u0631 <code>scripts<\/code> \u0622\u0631\u0627\u06cc\u0647 \u0648\u0627\u0642\u0639 \u062f\u0631 <code>angular.json &gt; projects &gt; angular-wrapper &gt; architect &gt; build &gt; options &gt; scripts<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight diff\"><code><span class=\"err\">\"styles\":<\/span> [\n  \"src\/styles.css\"\n<span class=\"err\">],<\/span>\n\"scripts\": [\n<span class=\"gi\">+ \"src\/scripts\/web-components.js\"\n<\/span><span class=\"err\">]<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>Angular \u0628\u0627 \u0647\u0645\u0631\u0627\u0647 \u06a9\u0631\u062f\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u062e\u0648\u062f \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f\u060c \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0634\u0645\u0627\u0631\u0646\u062f\u0647 \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645!<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight diff\"><code><span class=\"p\">import { Component } from '@angular\/core';\n<\/span>\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  template: `\n    &lt;h1&gt;Svelte in Angular!&lt;\/h1&gt;\n<span class=\"gi\">+   &lt;svelte-counter \/&gt;\n<\/span>  `,\n<span class=\"err\">})<\/span>\nexport class AppComponent {}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>&#8230; \u06cc\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645\u061f<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1690189342_308_\u0627\u0631\u0627\u0626\u0647-\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a-\u0647\u0627\u06cc-Svelte-\u0628\u0647-\u0639\u0646\u0648\u0627\u0646-\u0627\u062c\u0632\u0627\u06cc-\u0648\u0628-\u062f\u0631-Angular.png\" alt=\"\u062e\u0637\u0627\u06cc \u0637\u0631\u062d\u0648\u0627\u0631\u0647 \u0639\u0646\u0627\u0635\u0631 \u0633\u0641\u0627\u0631\u0634\u06cc \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc\" loading=\"lazy\" width=\"800\" height=\"300\" title=\"\"><\/p>\n<p>\u062f\u0631 \u062a\u0644\u0627\u0634\u06cc \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0627\u0646\u062c\u0627\u0645 \u0627\u0634\u062a\u0628\u0627\u0647\u0627\u062a\u060c Angular \u0639\u0646\u0627\u0635\u0631 HTML \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u0627 \u0631\u0627 \u0627\u0633\u06a9\u0646 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0645\u06cc \u0628\u06cc\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u0622\u0646\u0647\u0627 \u06cc\u06a9 \u0639\u0646\u0635\u0631 HTML \u0628\u0648\u0645\u06cc \u0647\u0633\u062a\u0646\u062f \u06cc\u0627 \u06cc\u06a9 \u062c\u0632\u0621 Angular \u0642\u0627\u0628\u0644 \u062d\u0644.<\/p>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0627\u060c \u0627\u06cc\u0646 \u0647\u06cc\u0686 \u06a9\u062f\u0627\u0645 \u0646\u06cc\u0633\u062a.<\/p>\n<p>\u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u06cc\u0645 \u06a9\u0647 Angular \u0631\u0627\u0647 \u062d\u0644\u06cc \u0628\u0631\u0627\u06cc \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u062f:<\/p>\n<blockquote>\n<p>\u0627\u06af\u0631 \u00absvelte-counter\u00bb \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0648\u0628 \u0627\u0633\u062a\u060c \u00abCUSTOM_ELEMENTS_SCHEMA\u00bb \u0631\u0627 \u0628\u0647 \u00abComponent.schemas@\u00bb \u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0627\u06cc\u0646 \u067e\u06cc\u0627\u0645 \u0633\u0631\u06a9\u0648\u0628 \u0634\u0648\u062f.<\/p>\n<\/blockquote>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight diff\"><code><span class=\"gi\">+ import { Component, CUSTOM_ELEMENTS_SCHEMA } from \"@angular\/core\";\n<\/span>\n@Component({\n  selector: \"app-root\",\n  standalone: true,\n<span class=\"gi\">+ schemas: [CUSTOM_ELEMENTS_SCHEMA],\n<\/span>  template: `\n    &lt;h1&gt;Svelte in Angular!&lt;\/h1&gt;\n    &lt;svelte-counter \/&gt;\n  `,\n<span class=\"err\">})<\/span>\nexport class AppComponent {}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f Svelte Web Component \u0631\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 Angular \u0645\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1690189342_443_\u0627\u0631\u0627\u0626\u0647-\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a-\u0647\u0627\u06cc-Svelte-\u0628\u0647-\u0639\u0646\u0648\u0627\u0646-\u0627\u062c\u0632\u0627\u06cc-\u0648\u0628-\u062f\u0631-Angular.gif\" alt=\"\u0634\u0645\u0627\u0631\u0646\u062f\u0647 Svelte \u062f\u0631 Angular\" loading=\"lazy\" width=\"432\" height=\"497\" data-animated=\"true\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%BA%D8%B0%D8%A7%DB%8C_%D8%A2%D9%85%D8%A7%D8%AF%D9%87\"><\/span>\n<p>  \u063a\u0630\u0627\u06cc \u0622\u0645\u0627\u062f\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u062f\u06cc\u062f\u06cc\u0645 \u06a9\u0647 Web Components \u0686\u06cc\u0633\u062a\u060c \u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Svelte \u0631\u0627 \u0628\u0647 \u06cc\u06a9 Web Component \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0646\u06cc\u0645 \u0648 \u0686\u06af\u0648\u0646\u0647 \u0622\u0646 \u0631\u0627 \u0627\u0632 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Angular \u0645\u0635\u0631\u0641 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0627\u06cc\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f \u0628\u0647 \u0644\u0637\u0641 \u0628\u0633\u062a\u0647\u200c\u0647\u0627\u06cc \u062c\u0627\u0645\u0639\u0647 \u0648 \u0645\u0627\u0647\u06cc\u062a \u062e\u0648\u062f Svelte \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a: \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644\u0631 \u0628\u0648\u062f\u0646\u060c \u0627\u06cc\u062c\u0627\u062f \u062a\u06a9\u0647\u200c\u0647\u0627\u06cc\u06cc \u0627\u0632 JS \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u062f\u0631 \u0647\u0631 \u062c\u0627\u06cc\u06cc \u0627\u062c\u0631\u0627 \u0634\u0648\u0646\u062f\u060c \u062f\u0631 \u0645\u0627\u0647\u06cc\u062a \u062e\u0648\u062f\u0634 \u0627\u0633\u062a.<\/p>\n<blockquote>\n<p>\u0627\u06af\u0631 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u062f \u0628\u0647 \u062f\u0633\u062a \u0622\u0645\u062f\u0647 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0645\u062e\u0632\u0646 GitHub \u0645\u0631\u062a\u0628\u0637 \u0628\u0631\u0648\u06cc\u062f<\/p>\n<\/blockquote>\n<hr\/>\n<p>\u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u0645 \u062f\u0631 \u0622\u0646\u062c\u0627 \u0686\u06cc\u0632 \u0645\u0641\u06cc\u062f\u06cc \u06cc\u0627\u062f \u0628\u06af\u06cc\u0631\u06cc\u062f!<\/p>\n<div class=\"ltag__user ltag__user__id__40197\" style=\"border-color:#575ad4;box-shadow: 3px 3px 0px #575ad4;\">\n<div class=\"ltag__user__pic\">\n        <img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/06\/\u0686\u06cc\u0632\u0647\u0627\u06cc-\u062c\u062f\u06cc\u062f-\u062f\u0631-Svelte-4-\u0627\u0641\u0632\u0627\u06cc\u0634-\u0639\u0645\u0644\u06a9\u0631\u062f-\u0648-\u062a\u0648\u0633\u0639\u0647-\u06a9\u0627\u0631\u0622\u0645\u062f.jpeg\" alt=\"\u062a\u0635\u0648\u06cc\u0631 pbouillon\" loading=\"lazy\" title=\"\">\n      <\/div>\n<\/div>\n<hr\/>\n<blockquote>\n<p>\u0639\u06a9\u0633 \u0627\u0632 Didssph \u062f\u0631 Unsplash<\/p>\n<\/blockquote><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Svelte \u062f\u0631 \u062d\u0627\u0644 \u0631\u0634\u062f \u0627\u0633\u062a \u0648 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0642\u0628\u0644\u06cc State of JS \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u062f\u0631 \u0633\u0627\u0644 \u0647\u0627\u06cc \u06af\u0630\u0634\u062a\u0647 \u0628\u0647 \u0633\u0631\u0639\u062a \u0645\u0648\u0631\u062f \u062a\u0648\u062c\u0647 \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0647 \u0627\u0633\u062a: \u0628\u0627 \u0622\u0645\u0648\u0632\u0634 \u062c\u0627\u0645\u0639 \u0622\u0646\u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0648\u0633\u0648\u0633\u0647 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u06cc\u06a9 \u0642\u062f\u0645 \u0641\u0631\u0627\u062a\u0631 \u0628\u0631\u062f\u0627\u0631\u06cc\u062f \u0648 \u0627\u0632 Svelte \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0627\u0642\u0639\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c &hellip;<\/p>\n","protected":false},"author":2,"featured_media":31769,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-31768","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/31768","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=31768"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/31768\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/31769"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=31768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=31768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=31768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}