{"id":102514,"date":"2025-03-21T13:25:46","date_gmt":"2025-03-21T09:55:46","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript\/"},"modified":"2025-03-21T13:25:46","modified_gmt":"2025-03-21T09:55:46","slug":"shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript\/","title":{"rendered":"Shadow Dom: Encapsulation \u0645\u0624\u0644\u0641\u0647 \u0648\u0628 Master \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0645\u062f\u0631\u0646 JavaScript"},"content":{"rendered":"<div data-article-id=\"2347725\" id=\"article-body\">\n<blockquote>\n<p>\u0645\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0646\u0648\u06cc\u0633\u0646\u062f\u0647 \u067e\u0631\u0641\u0631\u0648\u0634 \u060c \u0634\u0645\u0627 \u0631\u0627 \u062f\u0639\u0648\u062a \u0645\u06cc \u06a9\u0646\u0645 \u062a\u0627 \u06a9\u062a\u0627\u0628\u0647\u0627\u06cc \u0645\u0646 \u0631\u0627 \u062f\u0631 \u0622\u0645\u0627\u0632\u0648\u0646 \u06a9\u0634\u0641 \u06a9\u0646\u06cc\u062f. \u0641\u0631\u0627\u0645\u0648\u0634 \u0646\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0645\u0631\u0627 \u062f\u0631 \u0645\u062a\u0648\u0633\u0637 \u200b\u200b\u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u062e\u0648\u062f \u0631\u0627 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f. \u0645\u0645\u0646\u0648\u0646 \u062d\u0645\u0627\u06cc\u062a \u0634\u0645\u0627 \u0628\u0647 \u0645\u0639\u0646\u0627\u06cc \u062c\u0647\u0627\u0646 \u0627\u0633\u062a! <\/p>\n<\/blockquote>\n<p>API Shadow Dom \u06cc\u06a9 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0627\u0646\u0642\u0644\u0627\u0628\u06cc \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0627\u0633\u062a \u060c \u0648 \u0633\u0637\u062d \u0645\u062d\u0627\u0635\u0631\u0647 \u0627\u06cc \u0631\u0627 \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u062c\u0644\u0648 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06cc\u0627\u0628\u06cc \u0628\u0647 \u0622\u0646 \u062f\u0634\u0648\u0627\u0631 \u0628\u0648\u062f \u060c \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f. \u0645\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 JavaScript \u06a9\u0647 \u0628\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0645\u062f\u0631\u0646 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f \u060c \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0645 \u06a9\u0647 Shadow Dom \u06cc\u06a9\u06cc \u0627\u0632 \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u062a\u0631\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u062c\u0632\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0627\u0633\u062a.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 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=\"Toggle Table of Content\"><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\/shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript\/#%D8%AF%D8%B1%DA%A9_DOM_%D8%B3%D8%A7%DB%8C%D9%87\" >\u062f\u0631\u06a9 DOM \u0633\u0627\u06cc\u0647<\/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\/shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript\/#%D8%AA%DA%A9%D9%86%DB%8C%DA%A9_%D9%87%D8%A7%DB%8C_%D8%AC%D8%AF%D8%A7%D8%B3%D8%A7%D8%B2%DB%8C_%D8%AF%D8%A7%D9%85%D9%86%D9%87\" >\u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627\u06cc \u062c\u062f\u0627\u0633\u0627\u0632\u06cc \u062f\u0627\u0645\u0646\u0647<\/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\/shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript\/#%D8%A7%D8%B3%D8%AA%D8%B1%D8%A7%D8%AA%DA%98%DB%8C_%D9%87%D8%A7%DB%8C_%D9%85%D8%AD%D8%B5%D9%88%D8%B1_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%B3%D8%A8%DA%A9\" >\u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc \u0647\u0627\u06cc \u0645\u062d\u0635\u0648\u0631 \u0633\u0627\u0632\u06cc \u0633\u0628\u06a9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript\/#%DA%A9%D8%A7%D8%B1_%D8%A8%D8%A7_%D8%AE%D9%88%D8%A7%D8%B5_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_CSS\" >\u06a9\u0627\u0631 \u0628\u0627 \u062e\u0648\u0627\u0635 \u0633\u0641\u0627\u0631\u0634\u06cc CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript\/#%D8%B1%D8%B3%DB%8C%D8%AF%DA%AF%DB%8C_%D8%A8%D9%87_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D9%88_%D8%A8%D8%A7%D8%B2%D9%BE%D8%B1%D8%AF%D8%A7%D8%AE%D8%AA\" >\u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 \u0628\u0627\u0632\u067e\u0631\u062f\u0627\u062e\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript\/#%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%D8%B4%DA%A9%D8%A7%D9%81_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AA%D9%88%D8%B2%DB%8C%D8%B9_%D9%85%D8%AD%D8%AA%D9%88%D8%A7\" >\u0645\u062f\u06cc\u0631\u06cc\u062a \u0634\u06a9\u0627\u0641 \u0628\u0631\u0627\u06cc \u062a\u0648\u0632\u06cc\u0639 \u0645\u062d\u062a\u0648\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript\/#Custom_Header\" >Custom Header<\/a><\/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\/shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript\/#%DA%A9%D8%A7%D8%B1_%D8%A8%D8%A7_%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C_%D8%B4%DA%A9%D8%A7%D9%81_%D8%AF%D8%A7%D8%B1\" >\u06a9\u0627\u0631 \u0628\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u0634\u06a9\u0627\u0641 \u062f\u0627\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript\/#%D8%AA%D9%85%D8%A8%D8%B1_%D8%A7%D9%84%DA%AF%D9%88_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF\" >\u062a\u0645\u0628\u0631 \u0627\u0644\u06af\u0648 \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript\/#%D9%86%D9%82%D8%B4%D9%87_%D8%A8%D8%B1%D8%AF%D8%A7%D8%B1%DB%8C_%D8%A8%D8%AE%D8%B4%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%82%D8%B1%D8%A7%D8%B1_%DA%AF%D8%B1%D9%81%D8%AA%D9%86_%D8%AF%D8%B1_%D9%85%D8%B9%D8%B1%D8%B6_%D9%82%D9%84%D8%A7%D8%A8_%DB%8C%DA%A9_%D8%B8%D8%A7%D9%87%D8%B1_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%B4%D8%AF%D9%87\" >\u0646\u0642\u0634\u0647 \u0628\u0631\u062f\u0627\u0631\u06cc \u0628\u062e\u0634\u06cc \u0628\u0631\u0627\u06cc \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0646 \u062f\u0631 \u0645\u0639\u0631\u0636 \u0642\u0644\u0627\u0628 \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647<\/a><\/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\/shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript\/#%D8%AA%D8%B1%DA%A9%DB%8C%D8%A8_%D9%BE%DB%8C%D8%B4%D8%B1%D9%81%D8%AA%D9%87_%D8%A8%D8%A7_Shadow_Dom\" >\u062a\u0631\u06a9\u06cc\u0628 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0628\u0627 Shadow Dom<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript\/#%D9%85%D9%84%D8%A7%D8%AD%D8%B8%D8%A7%D8%AA_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF\" >\u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0639\u0645\u0644\u06a9\u0631\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript\/#%D8%A7%D8%B4%DA%A9%D8%A7%D9%84_%D8%B2%D8%AF%D8%A7%DB%8C%DB%8C_%D8%A7%D8%AC%D8%B2%D8%A7%DB%8C_DOM_Shadow\" >\u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc \u0627\u062c\u0632\u0627\u06cc DOM Shadow<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript\/#%D8%B3%D8%A7%D8%B2%DA%AF%D8%A7%D8%B1%DB%8C_%D9%85%D8%B1%D9%88%D8%B1%DA%AF%D8%B1_%D9%88_Polyfills\" >\u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0645\u0631\u0648\u0631\u06af\u0631 \u0648 Polyfills<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript\/#%D9%BE%D8%A7%DB%8C%D8%A7%D9%86\" >\u067e\u0627\u06cc\u0627\u0646<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript\/#101_%DA%A9%D8%AA%D8%A7%D8%A8\" >101 \u06a9\u062a\u0627\u0628<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/nabfollower.com\/blog\/shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript\/#%D8%AE%D9%84%D8%A7%D9%82%DB%8C%D8%AA_%D9%87%D8%A7%DB%8C_%D9%85%D8%A7\" >\u062e\u0644\u0627\u0642\u06cc\u062a \u0647\u0627\u06cc \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-18\" href=\"https:\/\/nabfollower.com\/blog\/shadow-dom-encapsulation-%d9%85%d8%a4%d9%84%d9%81%d9%87-%d9%88%d8%a8-master-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d9%85%d8%af%d8%b1%d9%86-javascript\/#%D9%85%D8%A7_%D8%AF%D8%B1_%D9%85%D8%AA%D9%88%D8%B3%D8%B7_%E2%80%8B%E2%80%8B%D9%87%D8%B3%D8%AA%DB%8C%D9%85\" >\u0645\u0627 \u062f\u0631 \u0645\u062a\u0648\u0633\u0637 \u200b\u200b\u0647\u0633\u062a\u06cc\u0645<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B1%DA%A9_DOM_%D8%B3%D8%A7%DB%8C%D9%87\"><\/span>\n<p>  \u062f\u0631\u06a9 DOM \u0633\u0627\u06cc\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Shadow Dom \u06cc\u06a9 \u062f\u0631\u062e\u062a DOM \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0648\u0635\u0644 \u0634\u062f\u0647 \u0628\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u060c \u06a9\u0647 \u0627\u0632 DOM DOCHENT \u0627\u0635\u0644\u06cc \u062c\u062f\u0627 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0645\u062d\u0635\u0648\u0631 \u06a9\u0631\u062f\u0646 \u0627\u0632 \u0646\u0634\u062a \u0633\u0628\u06a9 \u0648 \u0646\u0627\u0645\u06af\u0630\u0627\u0631\u06cc \u0628\u0631\u062e\u0648\u0631\u062f \u06a9\u0647 \u0627\u063a\u0644\u0628 \u0645\u0639\u0645\u0627\u0631\u06cc \u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0645\u0624\u0644\u0641\u0647 \u0637\u0627\u0639\u0648\u0646 \u0627\u0633\u062a \u060c \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0627\u0635\u0644 \u0627\u0635\u0644\u06cc \u067e\u0634\u062a Shadow Dom \u0633\u0627\u062f\u0647 \u0627\u0633\u062a: \u0627\u06cc\u0646 \u0645\u062d\u0627\u0641\u0638\u062a \u0627\u0632 \u0645\u0631\u0632 \u0628\u06cc\u0646 \u062f\u0627\u062e\u0644\u06cc \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u0648 \u0628\u0642\u06cc\u0647 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u062c\u062f\u0627\u06cc\u06cc \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0642\u0627\u0628\u0644 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062a\u0631 \u0648 \u062d\u0641\u0638 \u0634\u0648\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Creating a basic shadow DOM<\/span>\n<span class=\"kd\">class<\/span> <span class=\"nc\">SimpleComponent<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">HTMLElement<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\n    <span class=\"c1\">\/\/ Create a shadow root<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">shadow<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">attachShadow<\/span><span class=\"p\">({<\/span><span class=\"na\">mode<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">open<\/span><span class=\"dl\">'<\/span><span class=\"p\">});<\/span>\n\n    <span class=\"c1\">\/\/ Create element<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">wrapper<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">createElement<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">div<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">wrapper<\/span><span class=\"p\">.<\/span><span class=\"nx\">textContent<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">This content is encapsulated<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"c1\">\/\/ Add to shadow DOM<\/span>\n    <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nf\">appendChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">wrapper<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ Register the custom element<\/span>\n<span class=\"nx\">customElements<\/span><span class=\"p\">.<\/span><span class=\"nf\">define<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">simple-component<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">SimpleComponent<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<h2><span class=\"ez-toc-section\" id=\"%D8%AA%DA%A9%D9%86%DB%8C%DA%A9_%D9%87%D8%A7%DB%8C_%D8%AC%D8%AF%D8%A7%D8%B3%D8%A7%D8%B2%DB%8C_%D8%AF%D8%A7%D9%85%D9%86%D9%87\"><\/span>\n<p>  \u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627\u06cc \u062c\u062f\u0627\u0633\u0627\u0632\u06cc \u062f\u0627\u0645\u0646\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062c\u062f\u0627\u0633\u0627\u0632\u06cc DOM \u067e\u0627\u06cc\u0647 \u0648 \u0627\u0633\u0627\u0633 \u0642\u062f\u0631\u062a Shadow Dom \u0627\u0633\u062a. \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06cc\u06a9 \u0631\u06cc\u0634\u0647 \u0633\u0627\u06cc\u0647 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u062f \u060c \u0645\u0631\u0632\u06cc \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0632 \u0639\u0646\u0627\u0635\u0631 \u062f\u0627\u062e\u0644\u06cc \u0645\u0624\u0644\u0641\u0647 \u0634\u0645\u0627 \u0627\u0632 \u062f\u0633\u062a\u0631\u0633\u06cc \u06cc\u0627 \u0637\u0631\u0627\u062d\u06cc \u0627\u0632 \u062e\u0627\u0631\u062c \u0645\u062d\u0627\u0641\u0638\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u0646 \u0641\u0647\u0645\u06cc\u062f\u0645 \u06a9\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062f\u0627\u0648\u0645 \u0627\u0632 \u0633\u0627\u06cc\u0647 \u0628\u0627\u0632 \u060c \u0628\u0647\u062a\u0631\u06cc\u0646 \u062a\u0639\u0627\u062f\u0644 \u0628\u06cc\u0646 \u06a9\u067e\u0633\u0648\u0644\u0647 \u0633\u0627\u0632\u06cc \u0648 \u0639\u0645\u0644\u06cc \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f. \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u062d\u0627\u0644\u062a \u0628\u0633\u062a\u0647 \u0645\u062d\u0635\u0648\u0631 \u0633\u0627\u0632\u06cc \u0642\u0648\u06cc \u062a\u0631 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc \u0648 \u0642\u0627\u0628\u0644\u06cc\u062a \u06af\u0633\u062a\u0631\u0634 \u0645\u0624\u0644\u0641\u0647 \u0631\u0627 \u0645\u062d\u062f\u0648\u062f \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ DOM isolation example<\/span>\n<span class=\"kd\">class<\/span> <span class=\"nc\">IsolatedComponent<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">HTMLElement<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"c1\">\/\/ Create shadow root with open mode<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">shadow<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">attachShadow<\/span><span class=\"p\">({<\/span><span class=\"na\">mode<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">open<\/span><span class=\"dl\">'<\/span><span class=\"p\">});<\/span>\n\n    <span class=\"c1\">\/\/ Create internal structure<\/span>\n    <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHTML<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`\n      <div class=\"container\">\n        \n        <div class=\"content\">\n          <p>This content is isolated from the main document<\/p>\n        <\/div>\n      <\/div>\n    `<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"c1\">\/\/ These selectors won't conflict with the main document<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">header<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelector<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#header<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">header<\/span><span class=\"p\">.<\/span><span class=\"nx\">style<\/span><span class=\"p\">.<\/span><span class=\"nx\">color<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">blue<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nx\">customElements<\/span><span class=\"p\">.<\/span><span class=\"nf\">define<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">isolated-component<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">IsolatedComponent<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B3%D8%AA%D8%B1%D8%A7%D8%AA%DA%98%DB%8C_%D9%87%D8%A7%DB%8C_%D9%85%D8%AD%D8%B5%D9%88%D8%B1_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%B3%D8%A8%DA%A9\"><\/span>\n<p>  \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc \u0647\u0627\u06cc \u0645\u062d\u0635\u0648\u0631 \u0633\u0627\u0632\u06cc \u0633\u0628\u06a9<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u062d\u0635\u0648\u0631 \u0633\u0627\u0632\u06cc \u0633\u0628\u06a9 \u0634\u0627\u06cc\u062f \u0639\u0645\u0644\u06cc \u062a\u0631\u06cc\u0646 \u0645\u0632\u06cc\u062a Shadow Dom \u0628\u0627\u0634\u062f. \u0633\u0628\u06a9 \u0647\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0631\u06cc\u0634\u0647 \u0633\u0627\u06cc\u0647 \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u0639\u0646\u0627\u0635\u0631 \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0622\u0646 \u0627\u0639\u0645\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0633\u0628\u06a9 \u0647\u0627\u06cc \u062e\u0627\u0631\u062c\u06cc \u062f\u0631 \u0622\u0646 \u0646\u0634\u062a \u0646\u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u0647\u0646\u06af\u0627\u0645 \u0633\u0627\u062e\u062a \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0645\u0624\u0644\u0641\u0647 \u060c \u0645\u0646 \u0628\u0647 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u062a\u06a9\u06cc \u0647\u0633\u062a\u0645 \u062a\u0627 \u0628\u062f\u0648\u0646 \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a\u0646 \u0645\u062d\u06cc\u0637 \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u062f\u0631 \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u0632 \u0627\u062c\u0632\u0627\u06cc \u0645\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u060c \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u0634\u0648\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">class<\/span> <span class=\"nc\">StyledComponent<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">HTMLElement<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">shadow<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">attachShadow<\/span><span class=\"p\">({<\/span><span class=\"na\">mode<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">open<\/span><span class=\"dl\">'<\/span><span class=\"p\">});<\/span>\n\n    <span class=\"c1\">\/\/ Styles only apply within this component<\/span>\n    <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHTML<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`\n      \n      <p>This paragraph has encapsulated styles<\/p>\n    `<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nx\">customElements<\/span><span class=\"p\">.<\/span><span class=\"nf\">define<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">styled-component<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">StyledComponent<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<h2><span class=\"ez-toc-section\" id=\"%DA%A9%D8%A7%D8%B1_%D8%A8%D8%A7_%D8%AE%D9%88%D8%A7%D8%B5_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_CSS\"><\/span>\n<p>  \u06a9\u0627\u0631 \u0628\u0627 \u062e\u0648\u0627\u0635 \u0633\u0641\u0627\u0631\u0634\u06cc CSS<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u062d\u0641\u0638 \u0645\u062d\u0635\u0648\u0631 \u0633\u0627\u0632\u06cc \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0627\u062c\u0627\u0632\u0647 \u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc \u0645\u06cc \u0634\u0648\u062f \u060c \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0633\u0641\u0627\u0631\u0634\u06cc CSS (\u0645\u062a\u063a\u06cc\u0631\u0647\u0627) \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a. \u0622\u0646\u0647\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0632 \u0645\u0631\u0632 \u0633\u0627\u06cc\u0647 \u0639\u0628\u0648\u0631 \u06a9\u0646\u0646\u062f \u0648 \u0628\u062f\u0648\u0646 \u0634\u06a9\u0633\u062a\u0646 \u0645\u062d\u0627\u0635\u0631\u0647 \u060c \u0645\u0636\u0627\u0645\u06cc\u0646 \u0631\u0627 \u0627\u0645\u06a9\u0627\u0646 \u067e\u0630\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">class<\/span> <span class=\"nc\">ThemableComponent<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">HTMLElement<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">shadow<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">attachShadow<\/span><span class=\"p\">({<\/span><span class=\"na\">mode<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">open<\/span><span class=\"dl\">'<\/span><span class=\"p\">});<\/span>\n\n    <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHTML<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`\n      \n      \n    `<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nx\">customElements<\/span><span class=\"p\">.<\/span><span class=\"nf\">define<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">themable-component<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ThemableComponent<\/span><span class=\"p\">);<\/span>\n\n<span class=\"c1\">\/\/ Usage with custom properties<\/span>\n<span class=\"cm\">\/*\n\n<themable-component>Customized content<\/themable-component>\n*\/<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%B3%DB%8C%D8%AF%DA%AF%DB%8C_%D8%A8%D9%87_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D9%88_%D8%A8%D8%A7%D8%B2%D9%BE%D8%B1%D8%AF%D8%A7%D8%AE%D8%AA\"><\/span>\n<p>  \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 \u0628\u0627\u0632\u067e\u0631\u062f\u0627\u062e\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u0632 \u0645\u0631\u0632 \u0633\u0627\u06cc\u0647 \u0639\u0628\u0648\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f \u060c \u062a\u062d\u062a \u0639\u0646\u0648\u0627\u0646 \u0645\u062c\u062f\u062f \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u0646\u062f \u060c \u06a9\u0647 \u0647\u062f\u0641 \u0631\u0648\u06cc\u062f\u0627\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u062d\u062a\u0631\u0627\u0645 \u0628\u0647 \u0645\u062d\u0627\u0635\u0631\u0647 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0638\u0631\u0627\u0641\u062a \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 \u0627\u062c\u0632\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0627 \u0646\u0645\u0627\u06cc\u0646\u062f\u06af\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u0645\u0646\u0627\u0633\u0628 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u0633\u062a.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">class<\/span> <span class=\"nc\">EventComponent<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">HTMLElement<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">shadow<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">attachShadow<\/span><span class=\"p\">({<\/span><span class=\"na\">mode<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">open<\/span><span class=\"dl\">'<\/span><span class=\"p\">});<\/span>\n\n    <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHTML<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`\n      <button id=\"internal-button\">Click Me<\/button>\n      \n    `<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"c1\">\/\/ Internal event handling<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">button<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">internal-button<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">result<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">result<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"nx\">button<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">click<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">textContent<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Button was clicked!<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n      <span class=\"c1\">\/\/ Custom event that crosses shadow boundary<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">customEvent<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">CustomEvent<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">button-clicked<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">bubbles<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">composed<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ Allows event to cross shadow boundary<\/span>\n        <span class=\"na\">detail<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">time<\/span><span class=\"p\">:<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">()<\/span> <span class=\"p\">}<\/span>\n      <span class=\"p\">});<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">dispatchEvent<\/span><span class=\"p\">(<\/span><span class=\"nx\">customEvent<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nx\">customElements<\/span><span class=\"p\">.<\/span><span class=\"nf\">define<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">event-component<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">EventComponent<\/span><span class=\"p\">);<\/span>\n\n<span class=\"c1\">\/\/ Usage<\/span>\n<span class=\"cm\">\/*\ndocument.querySelector('event-component')\n  .addEventListener('button-clicked', (e) =&gt; {\n    console.log('External handler caught event:', e.detail.time);\n  });\n*\/<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%D8%B4%DA%A9%D8%A7%D9%81_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AA%D9%88%D8%B2%DB%8C%D8%B9_%D9%85%D8%AD%D8%AA%D9%88%D8%A7\"><\/span>\n<p>  \u0645\u062f\u06cc\u0631\u06cc\u062a \u0634\u06a9\u0627\u0641 \u0628\u0631\u0627\u06cc \u062a\u0648\u0632\u06cc\u0639 \u0645\u062d\u062a\u0648\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0633\u0644\u0627\u062a \u0647\u0627 \u0627\u062c\u0632\u0627\u06cc \u0633\u0627\u0632\u0646\u062f\u0647 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u0646\u062f \u062a\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u062e\u0627\u0631\u062c\u06cc \u0631\u0627 \u0628\u067e\u0630\u06cc\u0631\u0646\u062f \u0648 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f \u0648 \u06cc\u06a9 \u0627\u0644\u06af\u0648\u06cc \u062a\u0631\u06a9\u06cc\u0628 \u0648\u0627\u0636\u062d \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0646\u062f. \u0628\u0627 \u0627\u0633\u0644\u0627\u062a \u0647\u0627\u06cc \u0646\u0627\u0645\u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 \u060c \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0686\u0646\u062f\u06cc\u0646 \u0646\u0642\u0637\u0647 \u062f\u0631\u062c \u0628\u0631\u0627\u06cc \u062a\u0648\u0632\u06cc\u0639 \u0645\u062d\u062a\u0648\u0627\u06cc \u0633\u0627\u062e\u062a\u0627\u0631\u06cc \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">class<\/span> <span class=\"nc\">CardComponent<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">HTMLElement<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">shadow<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">attachShadow<\/span><span class=\"p\">({<\/span><span class=\"na\">mode<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">open<\/span><span class=\"dl\">'<\/span><span class=\"p\">});<\/span>\n\n    <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHTML<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`\n      \n      \n    `<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"c1\">\/\/ Detect when slotted content changes<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">slots<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelectorAll<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">slot<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">slots<\/span><span class=\"p\">.<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">(<\/span><span class=\"nx\">slot<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">slot<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">slotchange<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Content in <\/span><span class=\"p\">${<\/span><span class=\"nx\">slot<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">default<\/span><span class=\"dl\">'<\/span><span class=\"p\">}<\/span><span class=\"s2\"> slot changed`<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">});<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nx\">customElements<\/span><span class=\"p\">.<\/span><span class=\"nf\">define<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">card-component<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">CardComponent<\/span><span class=\"p\">);<\/span>\n\n<span class=\"c1\">\/\/ Usage<\/span>\n<span class=\"cm\">\/*\n<card-component>\n  <h2 slot=\"header\"><span class=\"ez-toc-section\" id=\"Custom_Header\"><\/span>Custom Header<span class=\"ez-toc-section-end\"><\/span><\/h2>\n  <p>This goes in the default slot<\/p>\n  <p>Custom Footer<\/p>\n<\/card-component>\n*\/<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<h2><span class=\"ez-toc-section\" id=\"%DA%A9%D8%A7%D8%B1_%D8%A8%D8%A7_%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C_%D8%B4%DA%A9%D8%A7%D9%81_%D8%AF%D8%A7%D8%B1\"><\/span>\n<p>  \u06a9\u0627\u0631 \u0628\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u0634\u06a9\u0627\u0641 \u062f\u0627\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0633\u062a\u0631\u0633\u06cc \u0648 \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0628\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u0634\u06a9\u0627\u0641 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627\u06cc \u0648\u06cc\u0698\u0647 \u0627\u06cc \u062f\u0627\u0631\u062f. \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u0646\u062f\u0647 :: slotted () \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0639\u0646\u0627\u0635\u0631\u06cc \u0631\u0627 \u06a9\u0647 \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u062e\u0648\u062f \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0647 \u0627\u0646\u062f \u060c \u0633\u0628\u06a9 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">class<\/span> <span class=\"nc\">MediaCard<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">HTMLElement<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">shadow<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">attachShadow<\/span><span class=\"p\">({<\/span><span class=\"na\">mode<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">open<\/span><span class=\"dl\">'<\/span><span class=\"p\">});<\/span>\n\n    <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHTML<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`\n      \n      \n    `<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"c1\">\/\/ Access nodes assigned to a slot<\/span>\n    <span class=\"nf\">setTimeout<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">titleSlot<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelector<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">slot[name=\"title\"]<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">assignedElements<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">titleSlot<\/span><span class=\"p\">.<\/span><span class=\"nf\">assignedNodes<\/span><span class=\"p\">({<\/span><span class=\"na\">flatten<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">});<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Elements in title slot:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">assignedElements<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">},<\/span> <span class=\"mi\">0<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nx\">customElements<\/span><span class=\"p\">.<\/span><span class=\"nf\">define<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">media-card<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">MediaCard<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<h2><span class=\"ez-toc-section\" id=\"%D8%AA%D9%85%D8%A8%D8%B1_%D8%A7%D9%84%DA%AF%D9%88_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF\"><\/span>\n<p>  \u062a\u0645\u0628\u0631 \u0627\u0644\u06af\u0648 \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc HTML \u0628\u0627 DOM Shadow \u060c \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647\u06cc\u0646\u0647 \u0645\u06cc \u0634\u0648\u062f \u0632\u06cc\u0631\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u0644\u06af\u0648\u06cc \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0628\u0627\u0631 \u062a\u062c\u0632\u06cc\u0647 \u0634\u0648\u062f \u060c \u0633\u067e\u0633 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0644\u0648\u0646 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Define a template in the HTML<\/span>\n<span class=\"cm\">\/*\n<template id=\"user-card-template\">\n  \n  <div class=\"card\">\n    <img class=\"avatar\"\/>\n    \n  <\/div>\n<\/template>\n*\/<\/span>\n\n<span class=\"kd\">class<\/span> <span class=\"nc\">UserCard<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">HTMLElement<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">shadow<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">attachShadow<\/span><span class=\"p\">({<\/span><span class=\"na\">mode<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">open<\/span><span class=\"dl\">'<\/span><span class=\"p\">});<\/span>\n\n    <span class=\"c1\">\/\/ Clone the template content<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">template<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">user-card-template<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">clone<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">template<\/span><span class=\"p\">.<\/span><span class=\"nx\">content<\/span><span class=\"p\">.<\/span><span class=\"nf\">cloneNode<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ Fill with data from attributes<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">avatar<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">clone<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelector<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.avatar<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">avatar<\/span><span class=\"p\">.<\/span><span class=\"nx\">src<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">getAttribute<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">avatar<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">default-avatar.png<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">name<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">clone<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelector<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.name<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">name<\/span><span class=\"p\">.<\/span><span class=\"nx\">textContent<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">getAttribute<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">name<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Unknown User<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">role<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">clone<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelector<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.role<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">role<\/span><span class=\"p\">.<\/span><span class=\"nx\">textContent<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">getAttribute<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">role<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">User<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nf\">appendChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">clone<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nx\">customElements<\/span><span class=\"p\">.<\/span><span class=\"nf\">define<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">user-card<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">UserCard<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<h2><span class=\"ez-toc-section\" id=\"%D9%86%D9%82%D8%B4%D9%87_%D8%A8%D8%B1%D8%AF%D8%A7%D8%B1%DB%8C_%D8%A8%D8%AE%D8%B4%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%82%D8%B1%D8%A7%D8%B1_%DA%AF%D8%B1%D9%81%D8%AA%D9%86_%D8%AF%D8%B1_%D9%85%D8%B9%D8%B1%D8%B6_%D9%82%D9%84%D8%A7%D8%A8_%DB%8C%DA%A9_%D8%B8%D8%A7%D9%87%D8%B1_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%B4%D8%AF%D9%87\"><\/span>\n<p>  \u0646\u0642\u0634\u0647 \u0628\u0631\u062f\u0627\u0631\u06cc \u0628\u062e\u0634\u06cc \u0628\u0631\u0627\u06cc \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0646 \u062f\u0631 \u0645\u0639\u0631\u0636 \u0642\u0644\u0627\u0628 \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0633\u06cc\u0633\u062a\u0645 \u0628\u062e\u0634\u06cc \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0639\u0646\u0627\u0635\u0631 \u062f\u0627\u062e\u0644\u06cc \u062e\u0627\u0635 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u062e\u0627\u0631\u062c\u06cc \u0628\u062f\u0648\u0646 \u0634\u06a9\u0633\u062a\u0646 \u0645\u062d\u0635\u0648\u0631 \u0633\u0627\u0632\u06cc \u062f\u0631 \u0645\u0639\u0631\u0636 \u0646\u0645\u0627\u06cc\u0634 \u0642\u0631\u0627\u0631 \u062f\u0647\u062f. \u0627\u06cc\u0646 \u06cc\u06a9 API \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u062c\u0632\u0627\u06cc \u0634\u0645\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">class<\/span> <span class=\"nc\">ProgressBar<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">HTMLElement<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">shadow<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">attachShadow<\/span><span class=\"p\">({<\/span><span class=\"na\">mode<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">open<\/span><span class=\"dl\">'<\/span><span class=\"p\">});<\/span>\n\n    <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHTML<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`\n      \n      \n    `<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_bar<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelector<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.bar<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"kd\">static<\/span> <span class=\"kd\">get<\/span> <span class=\"nf\">observedAttributes<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">progress<\/span><span class=\"dl\">'<\/span><span class=\"p\">];<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">attributeChangedCallback<\/span><span class=\"p\">(<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span> <span class=\"nx\">oldValue<\/span><span class=\"p\">,<\/span> <span class=\"nx\">newValue<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">name<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">progress<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">progress<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">parseInt<\/span><span class=\"p\">(<\/span><span class=\"nx\">newValue<\/span><span class=\"p\">)<\/span> <span class=\"o\">||<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_bar<\/span><span class=\"p\">.<\/span><span class=\"nx\">style<\/span><span class=\"p\">.<\/span><span class=\"nx\">width<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nb\">Math<\/span><span class=\"p\">.<\/span><span class=\"nf\">min<\/span><span class=\"p\">(<\/span><span class=\"mi\">100<\/span><span class=\"p\">,<\/span> <span class=\"nb\">Math<\/span><span class=\"p\">.<\/span><span class=\"nf\">max<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"nx\">progress<\/span><span class=\"p\">))}<\/span><span class=\"s2\">%`<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nx\">customElements<\/span><span class=\"p\">.<\/span><span class=\"nf\">define<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">progress-bar<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ProgressBar<\/span><span class=\"p\">);<\/span>\n\n<span class=\"c1\">\/\/ Usage with part styling<\/span>\n<span class=\"cm\">\/*\n\n<progress-bar progress=\"75\"\/>\n*\/<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<h2><span class=\"ez-toc-section\" id=\"%D8%AA%D8%B1%DA%A9%DB%8C%D8%A8_%D9%BE%DB%8C%D8%B4%D8%B1%D9%81%D8%AA%D9%87_%D8%A8%D8%A7_Shadow_Dom\"><\/span>\n<p>  \u062a\u0631\u06a9\u06cc\u0628 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0628\u0627 Shadow Dom<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06cc\u062c\u0627\u062f \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u063a\u0644\u0628 \u0634\u0627\u0645\u0644 \u062a\u0631\u06a9\u06cc\u0628 \u0686\u0646\u062f\u06cc\u0646 \u0639\u0646\u0627\u0635\u0631 \u0633\u0641\u0627\u0631\u0634\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0647\u0631 \u06a9\u062f\u0627\u0645 \u062f\u0627\u0631\u0627\u06cc \u0633\u0627\u06cc\u0647 \u062e\u0648\u062f \u0647\u0633\u062a\u0646\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0628\u0647 \u062d\u0641\u0638 \u062c\u062f\u0627\u06cc\u06cc \u0646\u06af\u0631\u0627\u0646\u06cc \u0647\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ A reusable button component<\/span>\n<span class=\"kd\">class<\/span> <span class=\"nc\">FancyButton<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">HTMLElement<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">shadow<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">attachShadow<\/span><span class=\"p\">({<\/span><span class=\"na\">mode<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">open<\/span><span class=\"dl\">'<\/span><span class=\"p\">});<\/span>\n\n    <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHTML<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`\n      \n      <button><slot\/><\/button>\n    `<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_button<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelector<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">button<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_button<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">click<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">e<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">dispatchEvent<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">CustomEvent<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">fancy-click<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">bubbles<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">composed<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span>\n      <span class=\"p\">}));<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ A dialog component that uses the button component<\/span>\n<span class=\"kd\">class<\/span> <span class=\"nc\">FancyDialog<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">HTMLElement<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">shadow<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">attachShadow<\/span><span class=\"p\">({<\/span><span class=\"na\">mode<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">open<\/span><span class=\"dl\">'<\/span><span class=\"p\">});<\/span>\n\n    <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHTML<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`\n      \n      \n    `<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"c1\">\/\/ Set up event listeners<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">cancelBtn<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">cancel<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">confirmBtn<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">confirm<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"nx\">cancelBtn<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">fancy-click<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">close<\/span><span class=\"p\">();<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">dispatchEvent<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">CustomEvent<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">dialog-cancel<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">bubbles<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">composed<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span>\n      <span class=\"p\">}));<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"nx\">confirmBtn<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">fancy-click<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">close<\/span><span class=\"p\">();<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">dispatchEvent<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">CustomEvent<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">dialog-confirm<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">bubbles<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">composed<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span>\n      <span class=\"p\">}));<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ Public API<\/span>\n  <span class=\"nf\">open<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">setAttribute<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">open<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">''<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">close<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeAttribute<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">open<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nx\">customElements<\/span><span class=\"p\">.<\/span><span class=\"nf\">define<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">fancy-button<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">FancyButton<\/span><span class=\"p\">);<\/span>\n<span class=\"nx\">customElements<\/span><span class=\"p\">.<\/span><span class=\"nf\">define<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">fancy-dialog<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">FancyDialog<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<h2><span class=\"ez-toc-section\" id=\"%D9%85%D9%84%D8%A7%D8%AD%D8%B8%D8%A7%D8%AA_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF\"><\/span>\n<p>  \u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0639\u0645\u0644\u06a9\u0631\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Shadow Dom \u0628\u0627 \u067e\u06cc\u0627\u0645\u062f\u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0647\u0645\u0631\u0627\u0647 \u0627\u0633\u062a. \u0647\u0631 \u0631\u06cc\u0634\u0647 \u0633\u0627\u06cc\u0647 \u062d\u0627\u0641\u0638\u0647 \u0631\u0627 \u0628\u0647 \u0633\u0631\u0628\u0627\u0631 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f \u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0647\u0645 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0646\u06af\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u060c \u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Efficient approach for list rendering<\/span>\n<span class=\"kd\">class<\/span> <span class=\"nc\">PerformantList<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">HTMLElement<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">attachShadow<\/span><span class=\"p\">({<\/span><span class=\"na\">mode<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">open<\/span><span class=\"dl\">'<\/span><span class=\"p\">});<\/span>\n\n    <span class=\"c1\">\/\/ Create the base structure once<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadowRoot<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHTML<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`\n      \n      \n    `<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_listElement<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadowRoot<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelector<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">ul<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"kd\">set<\/span> <span class=\"nf\">items<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ Clear existing items<\/span>\n    <span class=\"k\">while <\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_listElement<\/span><span class=\"p\">.<\/span><span class=\"nx\">firstChild<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_listElement<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeChild<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_listElement<\/span><span class=\"p\">.<\/span><span class=\"nx\">firstChild<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ Create a document fragment for better performance<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">fragment<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">createDocumentFragment<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"c1\">\/\/ Add new items<\/span>\n    <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">li<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">createElement<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">li<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n      <span class=\"c1\">\/\/ Create individual shadow roots only if necessary<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">getAttribute<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">use-shadow<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">true<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">shadow<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">li<\/span><span class=\"p\">.<\/span><span class=\"nf\">attachShadow<\/span><span class=\"p\">({<\/span><span class=\"na\">mode<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">open<\/span><span class=\"dl\">'<\/span><span class=\"p\">});<\/span>\n        <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHTML<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`\n          \n          <p><span class=\"p\">${<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span><span class=\"p\">}<\/span><span class=\"s2\"\/><\/p>\n        `<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ Simple approach for better performance<\/span>\n        <span class=\"nx\">li<\/span><span class=\"p\">.<\/span><span class=\"nx\">textContent<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span><span class=\"p\">;<\/span>\n        <span class=\"nx\">li<\/span><span class=\"p\">.<\/span><span class=\"nx\">style<\/span><span class=\"p\">.<\/span><span class=\"nx\">cssText<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">display: block; padding: 8px 16px; border-bottom: 1px solid #eee;<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"nx\">fragment<\/span><span class=\"p\">.<\/span><span class=\"nf\">appendChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">li<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_listElement<\/span><span class=\"p\">.<\/span><span class=\"nf\">appendChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">fragment<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nx\">customElements<\/span><span class=\"p\">.<\/span><span class=\"nf\">define<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">performant-list<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">PerformantList<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B4%DA%A9%D8%A7%D9%84_%D8%B2%D8%AF%D8%A7%DB%8C%DB%8C_%D8%A7%D8%AC%D8%B2%D8%A7%DB%8C_DOM_Shadow\"><\/span>\n<p>  \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc \u0627\u062c\u0632\u0627\u06cc DOM Shadow<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc DOM \u0633\u0627\u06cc\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0686\u0627\u0644\u0634 \u0628\u0631\u0627\u0646\u06af\u06cc\u0632 \u0628\u0627\u0634\u062f \u0632\u06cc\u0631\u0627 \u0633\u0627\u062e\u062a\u0627\u0631 DOM \u067e\u0646\u0647\u0627\u0646 \u0627\u0633\u062a. \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0627\u0628\u0632\u0627\u0631\u06cc \u0628\u0631\u0627\u06cc \u0628\u0627\u0632\u0631\u0633\u06cc \u0627\u0632 Shadow Dom \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u0646\u062f \u060c \u0627\u0645\u0627 \u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc \u062e\u0648\u062f \u0646\u06cc\u0632 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">class<\/span> <span class=\"nc\">DebuggableComponent<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">HTMLElement<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">shadow<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">attachShadow<\/span><span class=\"p\">({<\/span><span class=\"na\">mode<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">open<\/span><span class=\"dl\">'<\/span><span class=\"p\">});<\/span>\n\n    <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHTML<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`\n      \n    `<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"c1\">\/\/ Development mode detection<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">getItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">devMode<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">true<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">_setupDebugMode<\/span><span class=\"p\">(<\/span><span class=\"nx\">shadow<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">_setupDebugMode<\/span><span class=\"p\">(<\/span><span class=\"nx\">shadow<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ Add debug styles<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">style<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">createElement<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">style<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">style<\/span><span class=\"p\">.<\/span><span class=\"nx\">textContent<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`\n      .container {\n        position: relative;\n        border: 2px dashed red;\n        padding: 8px;\n      }\n      .debug-panel {\n        position: absolute;\n        bottom: 100%;\n        right: 0;\n        background: #f0f0f0;\n        border: 1px solid #ccc;\n        padding: 4px;\n        font-size: 12px;\n        z-index: 999;\n      }\n    `<\/span><span class=\"p\">;<\/span>\n    <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nf\">appendChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">style<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ Add debug panel<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">debugPanel<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">createElement<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">div<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">debugPanel<\/span><span class=\"p\">.<\/span><span class=\"nx\">classList<\/span><span class=\"p\">.<\/span><span class=\"nf\">add<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">debug-panel<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">debugPanel<\/span><span class=\"p\">.<\/span><span class=\"nx\">textContent<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">tagName<\/span><span class=\"p\">.<\/span><span class=\"nf\">toLowerCase<\/span><span class=\"p\">();<\/span>\n    <span class=\"nx\">shadow<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelector<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.container<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">appendChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">debugPanel<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ Log events<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">click<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">e<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Component clicked:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Shadow root:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadowRoot<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Event path:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nf\">composedPath<\/span><span class=\"p\">());<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nx\">customElements<\/span><span class=\"p\">.<\/span><span class=\"nf\">define<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">debuggable-component<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">DebuggableComponent<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%B2%DA%AF%D8%A7%D8%B1%DB%8C_%D9%85%D8%B1%D9%88%D8%B1%DA%AF%D8%B1_%D9%88_Polyfills\"><\/span>\n<p>  \u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0645\u0631\u0648\u0631\u06af\u0631 \u0648 Polyfills<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Shadow Dom \u0627\u06a9\u0646\u0648\u0646 \u0628\u0647 \u0637\u0648\u0631 \u06af\u0633\u062a\u0631\u062f\u0647 \u0627\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f \u060c \u0627\u0645\u0627 \u0628\u0631\u0627\u06cc \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0642\u062f\u06cc\u0645\u06cc \u062a\u0631 \u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a Polyfills \u0644\u0627\u0632\u0645 \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646\u0647\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc Shadow DOM \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u062f\u0631 \u0645\u062d\u06cc\u0637 \u0647\u0627\u06cc \u0642\u062f\u06cc\u0645\u06cc \u0628\u0633\u06cc\u0627\u0631 \u062a\u062d\u0642\u06cc\u0631\u0622\u0645\u06cc\u0632 \u0627\u0633\u062a.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Feature detection and polyfill loading<\/span>\n<span class=\"p\">(<\/span><span class=\"kd\">function<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c1\">\/\/ Check if Shadow DOM is supported<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">attachShadow<\/span><span class=\"dl\">'<\/span> <span class=\"k\">in<\/span> <span class=\"nx\">Element<\/span><span class=\"p\">.<\/span><span class=\"nx\">prototype<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Shadow DOM not supported - loading polyfill<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ Load the polyfill<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">script<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">createElement<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">script<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">script<\/span><span class=\"p\">.<\/span><span class=\"nx\">src<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">https:\/\/unpkg.com\/@webcomponents\/webcomponentsjs\/webcomponents-bundle.js<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n    <span class=\"nx\">script<\/span><span class=\"p\">.<\/span><span class=\"nx\">onload<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Polyfill loaded, initializing components<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n      <span class=\"nf\">initializeComponents<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">};<\/span>\n    <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">head<\/span><span class=\"p\">.<\/span><span class=\"nf\">appendChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">script<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">initializeComponents<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"kd\">function<\/span> <span class=\"nf\">initializeComponents<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ Initialize your components here after ensuring Shadow DOM support<\/span>\n    <span class=\"c1\">\/\/ ...<\/span>\n  <span class=\"p\">}<\/span>\n<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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<h2><span class=\"ez-toc-section\" id=\"%D9%BE%D8%A7%DB%8C%D8%A7%D9%86\"><\/span>\n<p>  \u067e\u0627\u06cc\u0627\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Shadow DOM \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0645\u0624\u0644\u0641\u0647 \u0631\u0627 \u062f\u0631 \u0648\u0628 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u062f. \u0627\u06cc\u0646 \u0645\u062d\u0641\u0638\u0647 \u0648\u0627\u0642\u0639\u06cc \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u060c \u0648 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0631\u0627 \u062f\u0631 \u0632\u0645\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0642\u0627\u0628\u0644 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062a\u0631 \u0648 \u062d\u0641\u0638 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627\u06cc \u062a\u062d\u062a \u067e\u0648\u0634\u0634 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 &#8211; \u062c\u062f\u0627\u0633\u0627\u0632\u06cc DOM \u060c \u0645\u062d\u0627\u0635\u0631\u0647 \u0633\u0628\u06a9 \u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u0627\u0633\u0644\u0627\u062a \u060c \u062a\u0645\u0628\u0631 \u0627\u0644\u06af\u0648 \u060c \u06a9\u0646\u062a\u0631\u0644 \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 \u0646\u0642\u0634\u0647 \u0628\u0631\u062f\u0627\u0631\u06cc \u0628\u062e\u0634\u06cc &#8211; \u067e\u0627\u06cc\u0647 \u0648 \u0627\u0633\u0627\u0633 \u0633\u0627\u062e\u062a \u0627\u062c\u0632\u0627\u06cc \u0648\u0628 \u0642\u0648\u06cc \u0628\u0627 Shadow Dom \u0631\u0627 \u062a\u0634\u06a9\u06cc\u0644 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0627\u0632 \u0622\u0646\u062c\u0627 \u06a9\u0647 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0647\u0645\u0686\u0646\u0627\u0646 \u0628\u0647 \u0633\u0645\u062a \u0645\u0639\u0645\u0627\u0631\u06cc \u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0645\u0624\u0644\u0641\u0647 \u062a\u06a9\u0627\u0645\u0644 \u0645\u06cc \u06cc\u0627\u0628\u062f \u060c \u062a\u0633\u0644\u0637 \u0628\u0631 Shadow Dom \u0628\u0647 \u06cc\u06a9 \u0645\u0647\u0627\u0631\u062a \u0627\u0633\u0627\u0633\u06cc \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u062c\u0628\u0647\u0647 \u06a9\u0647 \u0631\u0648\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0648 \u0642\u0627\u0628\u0644 \u062d\u0641\u0638 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f \u060c \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"101_%DA%A9%D8%AA%D8%A7%D8%A8\"><\/span>\n<p>  101 \u06a9\u062a\u0627\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>101 \u06a9\u062a\u0627\u0628<\/strong> \u06cc\u06a9 \u0634\u0631\u06a9\u062a \u0627\u0646\u062a\u0634\u0627\u0631\u0627\u062a AI \u0645\u062d\u0648\u0631 \u0627\u0633\u062a \u06a9\u0647 \u062a\u0648\u0633\u0637 \u0646\u0648\u06cc\u0633\u0646\u062f\u0647 \u062a\u0623\u0633\u06cc\u0633 \u0634\u062f\u0647 \u0627\u0633\u062a <strong>\u0622\u0631\u0627\u0648 \u062c\u0648\u0634\u06cc<\/strong>\u0628\u0634\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0646\u0627\u0648\u0631\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u060c \u0645\u0627 \u0647\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0627\u0646\u062a\u0634\u0627\u0631 \u062e\u0648\u062f \u0631\u0627 \u0641\u0648\u0642 \u0627\u0644\u0639\u0627\u062f\u0647 \u06a9\u0645 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u06cc\u0645 &#8211; \u0628\u0631\u062e\u06cc \u0627\u0632 \u06a9\u062a\u0627\u0628 \u0647\u0627 \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u06a9\u0645 \u0642\u06cc\u0645\u062a \u0647\u0633\u062a\u0646\u062f <strong>4 \u062f\u0644\u0627\u0631<\/strong>&#8211; \u0627\u06cc\u062c\u0627\u062f \u062f\u0627\u0646\u0634 \u0628\u0627 \u06a9\u06cc\u0641\u06cc\u062a \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0647\u0645\u0647.<\/p>\n<p>\u06a9\u062a\u0627\u0628 \u0645\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f <strong>\u06a9\u062f \u062a\u0645\u06cc\u0632 Golang<\/strong> \u062f\u0631 \u0622\u0645\u0627\u0632\u0648\u0646 \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a. <\/p>\n<p>\u0628\u0631\u0627\u06cc \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0647\u0627 \u0648 \u0627\u062e\u0628\u0627\u0631 \u0647\u06cc\u062c\u0627\u0646 \u0627\u0646\u06af\u06cc\u0632 \u0628\u0627 \u0645\u0627 \u062f\u0631 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627\u0634\u06cc\u062f. \u0647\u0646\u06af\u0627\u0645 \u062e\u0631\u06cc\u062f \u06a9\u062a\u0627\u0628 \u060c \u062c\u0633\u062a\u062c\u0648 \u06a9\u0646\u06cc\u062f <strong>\u0622\u0631\u0627\u0648 \u062c\u0648\u0634\u06cc<\/strong> \u0628\u0631\u0627\u06cc \u06cc\u0627\u0641\u062a\u0646 \u0628\u06cc\u0634\u062a\u0631 \u0639\u0646\u0627\u0648\u06cc\u0646 \u0645\u0627. \u0628\u0631\u0627\u06cc \u0644\u0630\u062a \u0628\u0631\u062f\u0646 \u0627\u0632 \u0644\u06cc\u0646\u06a9 \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <strong>\u062a\u062e\u0641\u06cc\u0641 \u0647\u0627\u06cc \u062e\u0627\u0635<\/strong>!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AE%D9%84%D8%A7%D9%82%DB%8C%D8%AA_%D9%87%D8%A7%DB%8C_%D9%85%D8%A7\"><\/span>\n<p>  \u062e\u0644\u0627\u0642\u06cc\u062a \u0647\u0627\u06cc \u0645\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062d\u062a\u0645\u0627 \u062e\u0644\u0627\u0642\u06cc\u062a \u0647\u0627\u06cc \u0645\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<p><strong>\u0633\u0631\u0645\u0627\u06cc\u0647 \u06af\u0630\u0627\u0631 \u0645\u0631\u06a9\u0632\u06cc<\/strong> | <strong>\u0633\u0631\u0645\u0627\u06cc\u0647 \u06af\u0630\u0627\u0631 \u0627\u0633\u067e\u0627\u0646\u06cc\u0627\u06cc\u06cc \u0645\u0631\u06a9\u0632\u06cc<\/strong> | <strong>\u0633\u0631\u0645\u0627\u06cc\u0647 \u06af\u0630\u0627\u0631 \u0622\u0644\u0645\u0627\u0646\u06cc \u0645\u0631\u06a9\u0632\u06cc<\/strong> | <strong>\u0632\u0646\u062f\u06af\u06cc \u0647\u0648\u0634\u0645\u0646\u062f<\/strong> | <strong>\u062f\u0648\u0631\u0647 \u0647\u0627 \u0648 \u067e\u0698\u0648\u0627\u06a9<\/strong> | <strong>\u0627\u0633\u0631\u0627\u0631 \u06af\u06cc\u062c \u06a9\u0646\u0646\u062f\u0647<\/strong> | <strong>\u0647\u0646\u062f\u0648\u062a\u0648\u0627<\/strong> | <strong>\u0646\u062e\u0628\u0647<\/strong> | <strong>\u0645\u062f\u0627\u0631\u0633 JS<\/strong><\/p>\n<hr\/>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%A7_%D8%AF%D8%B1_%D9%85%D8%AA%D9%88%D8%B3%D8%B7_%E2%80%8B%E2%80%8B%D9%87%D8%B3%D8%AA%DB%8C%D9%85\"><\/span>\n<p>  \u0645\u0627 \u062f\u0631 \u0645\u062a\u0648\u0633\u0637 \u200b\u200b\u0647\u0633\u062a\u06cc\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>\u0628\u06cc\u0646\u0634 \u0647\u0627\u06cc \u0641\u0646\u06cc Koala<\/strong> | <strong>Epochs &#038; Echoes World<\/strong> | <strong>\u0633\u0631\u0645\u0627\u06cc\u0647 \u06af\u0630\u0627\u0631 \u0631\u0633\u0627\u0646\u0647 \u0645\u0631\u06a9\u0632\u06cc<\/strong> | <strong>\u0631\u0645\u0632 \u0648 \u0631\u0627\u0632\u0647\u0627\u06cc \u06af\u06cc\u062c \u06a9\u0646\u0646\u062f\u0647 \u0645\u062a\u0648\u0633\u0637<\/strong> | <strong>\u0639\u0644\u0648\u0645 \u0648 \u062f\u0648\u0631\u0647 \u0647\u0627\u06cc \u0645\u062a\u0648\u0633\u0637<\/strong> | <strong>\u0647\u0646\u062f\u0648\u062a\u0648\u0627 \u0645\u062f\u0631\u0646<\/strong><\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0646\u0648\u06cc\u0633\u0646\u062f\u0647 \u067e\u0631\u0641\u0631\u0648\u0634 \u060c \u0634\u0645\u0627 \u0631\u0627 \u062f\u0639\u0648\u062a \u0645\u06cc \u06a9\u0646\u0645 \u062a\u0627 \u06a9\u062a\u0627\u0628\u0647\u0627\u06cc \u0645\u0646 \u0631\u0627 \u062f\u0631 \u0622\u0645\u0627\u0632\u0648\u0646 \u06a9\u0634\u0641 \u06a9\u0646\u06cc\u062f. \u0641\u0631\u0627\u0645\u0648\u0634 \u0646\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0645\u0631\u0627 \u062f\u0631 \u0645\u062a\u0648\u0633\u0637 \u200b\u200b\u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u062e\u0648\u062f \u0631\u0627 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f. \u0645\u0645\u0646\u0648\u0646 \u062d\u0645\u0627\u06cc\u062a \u0634\u0645\u0627 \u0628\u0647 \u0645\u0639\u0646\u0627\u06cc \u062c\u0647\u0627\u0646 \u0627\u0633\u062a! API Shadow Dom \u06cc\u06a9 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0627\u0646\u0642\u0644\u0627\u0628\u06cc \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0627\u0633\u062a \u060c \u0648 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":102515,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fjsschools.com%2Fimages%2F9a510bff-af47-4274-b810-0f8055b155de.webp","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-102514","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\/102514","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=102514"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/102514\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/102515"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=102514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=102514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=102514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}