[{"data":1,"prerenderedAt":347},["ShallowReactive",2],{"iNNUtLmRPf":3},[4],{"id":5,"date":6,"date_gmt":7,"guid":8,"modified":10,"modified_gmt":11,"slug":12,"status":13,"type":14,"link":15,"title":16,"content":18,"excerpt":21,"author":23,"featured_media":24,"comment_status":25,"ping_status":25,"sticky":20,"template":26,"format":27,"meta":28,"categories":29,"tags":31,"class_list":32,"acf":40,"yoast_head":41,"yoast_head_json":42,"featured_media_src_url":137,"_links":138,"_embedded":185},1686,"2025-06-29T14:08:59","2025-06-29T11:08:59",{"rendered":9},"https://api.aoskin.ru/?p=1686","2025-08-02T14:50:38","2025-08-02T11:50:38","declarative-shadow-dom-stili-i-komponenty-bez-js","publish","post","https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/",{"rendered":17},"Declarative Shadow DOM: стили и компоненты без JS",{"rendered":19,"protected":20},"\n\u003Ch2 class=\"wp-block-heading\">Что такое Declarative Shadow DOM?\u003C/h2>\n\n\n\n\u003Cp>Declarative Shadow DOM – это возможность описывать структуру Shadow DOM напрямую в HTML-разметке с помощью тега \u003Ccode><template>\u003C/code> и атрибута \u003Ccode>shadowrootmode=\"open\"\u003C/code>. Этот подход позволяет браузеру сразу отображать содержимое, не дожидаясь выполнения JS-кода.\u003C/p>\n\n\n\n\u003Cp>Пример декларативного Shadow DOM:\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-html\" data-lang=\"HTML\">\u003Ccode><div>\n  <template shadowrootmode="open">\n    <style>\n      p {\n        color: coral;\n      }\n    </style>\n    <p>Текст внутри Shadow DOM!</p>\n  </template>\n</div>\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp>В результате содержимое параграфа станет цветом coral и будет изолировано от глобальных стилей страницы.\u003C/p>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Преимущества Declarative Shadow DOM:\u003C/h2>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>\u003Cstrong>Производительность\u003C/strong>: Контент рендерится сразу, без задержек, которые обычно связаны с исполнением JS.\u003C/li>\n\n\n\n\u003Cli>\u003Cstrong>Изоляция стилей\u003C/strong>: Стили внутри Shadow DOM не конфликтуют с глобальными стилями страницы.\u003C/li>\n\n\n\n\u003Cli>\u003Cstrong>Удобство SSR\u003C/strong>: Идеально подходит для серверного рендеринга (SSR), так как не требует дополнительного JS-кода для активации компонентов.\u003C/li>\n\u003C/ul>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Как внедрять стили без JavaScript?\u003C/h2>\n\n\n\n\u003Cp>Необходимо просто поместить CSS внутрь тега \u003Ccode><style>\u003C/code> либо использовать тег \u003Ccode><link>\u003C/code> в шаблоне с атрибутом \u003Ccode>\u003Ccode>shadowrootmode\u003C/code>\u003C/code>. Браузер автоматически применит их к содержимому Shadow DOM, полностью изолировав стили:\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-html\" data-lang=\"HTML\">\u003Ccode><div>\n  <template shadowrootmode="open">\n    <style>\n      button {\n        background-color: coral;\n        color: white;\n      }\n    </style>\n    <link rel="stylesheet" href="/style.css" />\n    <button>Button</button>\n  </template>\n</div>\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp>Кроме того, стили, заданные таким образом, отлично оптимизированы браузером. Если одна и та же таблица стилей используется в нескольких декларативных Shadow DOM-компонентах, браузер загружает и анализирует её всего один раз. Это происходит благодаря тому, что браузер использует общий экземпляр CSSStyleSheet для всех теневых корней, что экономит память и исключает лишние затраты ресурсов.\u003C/p>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Где Declarative Shadow DOM особенно полезен?\u003C/h2>\n\n\n\n\u003Cp>\u003Cstrong>UI-компоненты\u003C/strong>:\u003C/p>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>Кастомные кнопки с изоляцией стилей\u003C/li>\n\n\n\n\u003Cli>Модальные окна, tooltip’ы\u003C/li>\n\n\n\n\u003Cli>Аккордеоны и раскрывающиеся секции\u003C/li>\n\u003C/ul>\n\n\n\n\u003Cp>\u003Cstrong>Блоки с контентом\u003C/strong>:\u003C/p>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>Карточки товаров, статей или профилей\u003C/li>\n\n\n\n\u003Cli>Элементы ленты: посты, комментарии\u003C/li>\n\u003C/ul>\n\n\n\n\u003Cp>\u003Cstrong>Интерактивные элементы без JS\u003C/strong>:\u003C/p>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>Звёздочки рейтинга\u003C/li>\n\n\n\n\u003Cli>Таб-панели с переключением\u003C/li>\n\u003C/ul>\n\n\n\n\u003Cp>\u003Cstrong>Формы и поля\u003C/strong>:\u003C/p>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>Формы авторизации, подписки\u003C/li>\n\n\n\n\u003Cli>Кастомные чекбоксы, радиокнопки, переключатели\u003C/li>\n\u003C/ul>\n\n\n\n\u003Cp>\u003Cstrong>Баннеры и уведомления\u003C/strong>:\u003C/p>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>Cookie-сообщения\u003C/li>\n\n\n\n\u003Cli>Уведомления, toast-блоки\u003C/li>\n\u003C/ul>\n\n\n\n\u003Cp>Благодаря изоляции и простоте внедрения, такие компоненты можно использовать даже без подключения JavaScript – например, в статических сайтах или проектах с упором на SSR.\u003C/p>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Заключение\u003C/h2>\n\n\n\n\u003Cp>Используя Declarative Shadow DOM, вы сможете упростить разработку компонентов, ускорить рендеринг и обеспечить надежную изоляцию стилей без написания дополнительного JavaScript-кода.\u003C/p>\n",false,{"rendered":22,"protected":20},"\u003Cp>С появлением Declarative Shadow DOM веб-разработка сделала еще один шаг вперед к простоте и гибкости. Теперь можно использовать Shadow DOM и стилизовать компоненты прямо в HTML, не прибегая к JavaScript.\u003C/p>\n",1,1687,"open","","standard",{"_acf_changed":20,"footnotes":26},[30],15,[],[33,14,34,35,36,37,38,39],"post-1686","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html",[],"\u003C!-- This site is optimized with the Yoast SEO plugin v26.6 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Ctitle>Declarative Shadow DOM: стили и компоненты без JS\u003C/title>\n\u003Cmeta name=\"description\" content=\"- Declarative Shadow DOM шаг к простоте и гибкости. Используем Shadow DOM и стилизуем компоненты прямо в HTML, не прибегая к JavaScript.\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:locale\" content=\"en_US\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:type\" content=\"article\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:title\" content=\"Declarative Shadow DOM: стили и компоненты без JS\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:description\" content=\"- Declarative Shadow DOM шаг к простоте и гибкости. Используем Shadow DOM и стилизуем компоненты прямо в HTML, не прибегая к JavaScript.\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:url\" content=\"https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:site_name\" content=\"api.aoskin.ru\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"article:published_time\" content=\"2025-06-29T11:08:59+00:00\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"article:modified_time\" content=\"2025-08-02T11:50:38+00:00\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:image\" content=\"https://api.aoskin.ru/wp-content/uploads/2025/08/39-declarative-shadow-dom.webp\" class=\"yoast-seo-meta-tag\" />\n\t\u003Cmeta property=\"og:image:width\" content=\"1184\" class=\"yoast-seo-meta-tag\" />\n\t\u003Cmeta property=\"og:image:height\" content=\"896\" class=\"yoast-seo-meta-tag\" />\n\t\u003Cmeta property=\"og:image:type\" content=\"image/webp\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta name=\"author\" content=\"aoskin\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Written by\" class=\"yoast-seo-meta-tag\" />\n\t\u003Cmeta name=\"twitter:data1\" content=\"aoskin\" class=\"yoast-seo-meta-tag\" />\n\t\u003Cmeta name=\"twitter:label2\" content=\"Est. reading time\" class=\"yoast-seo-meta-tag\" />\n\t\u003Cmeta name=\"twitter:data2\" content=\"2 minutes\" class=\"yoast-seo-meta-tag\" />\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/#article\",\"isPartOf\":{\"@id\":\"https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/\"},\"author\":{\"name\":\"aoskin\",\"@id\":\"https://api.aoskin.ru/#/schema/person/b5e1c81c85a50ca05e16fcdfa29f4861\"},\"headline\":\"Declarative Shadow DOM: стили и компоненты без JS\",\"datePublished\":\"2025-06-29T11:08:59+00:00\",\"dateModified\":\"2025-08-02T11:50:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/\"},\"wordCount\":288,\"commentCount\":0,\"publisher\":{\"@id\":\"https://api.aoskin.ru/#/schema/person/b5e1c81c85a50ca05e16fcdfa29f4861\"},\"image\":{\"@id\":\"https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/#primaryimage\"},\"thumbnailUrl\":\"https://api.aoskin.ru/wp-content/uploads/2025/08/39-declarative-shadow-dom.webp\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/\",\"url\":\"https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/\",\"name\":\"Declarative Shadow DOM: стили и компоненты без JS\",\"isPartOf\":{\"@id\":\"https://api.aoskin.ru/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/#primaryimage\"},\"image\":{\"@id\":\"https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/#primaryimage\"},\"thumbnailUrl\":\"https://api.aoskin.ru/wp-content/uploads/2025/08/39-declarative-shadow-dom.webp\",\"datePublished\":\"2025-06-29T11:08:59+00:00\",\"dateModified\":\"2025-08-02T11:50:38+00:00\",\"description\":\"- Declarative Shadow DOM шаг к простоте и гибкости. Используем Shadow DOM и стилизуем компоненты прямо в HTML, не прибегая к JavaScript.\",\"breadcrumb\":{\"@id\":\"https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/#primaryimage\",\"url\":\"https://api.aoskin.ru/wp-content/uploads/2025/08/39-declarative-shadow-dom.webp\",\"contentUrl\":\"https://api.aoskin.ru/wp-content/uploads/2025/08/39-declarative-shadow-dom.webp\",\"width\":1184,\"height\":896},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://api.aoskin.ru/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Declarative Shadow DOM: стили и компоненты без JS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https://api.aoskin.ru/#website\",\"url\":\"https://api.aoskin.ru/\",\"name\":\"aoskin.ru\",\"description\":\"\",\"publisher\":{\"@id\":\"https://api.aoskin.ru/#/schema/person/b5e1c81c85a50ca05e16fcdfa29f4861\"},\"alternateName\":\"aoskin.ru\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https://api.aoskin.ru/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https://api.aoskin.ru/#/schema/person/b5e1c81c85a50ca05e16fcdfa29f4861\",\"name\":\"aoskin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https://api.aoskin.ru/#/schema/person/image/\",\"url\":\"https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g\",\"contentUrl\":\"https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g\",\"caption\":\"aoskin\"},\"logo\":{\"@id\":\"https://api.aoskin.ru/#/schema/person/image/\"},\"sameAs\":[\"http://api.aoskin.ru\"],\"url\":\"https://api.aoskin.ru/author/aoskin/\"}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"title":17,"description":43,"robots":44,"canonical":15,"og_locale":50,"og_type":51,"og_title":17,"og_description":43,"og_url":15,"og_site_name":52,"article_published_time":53,"article_modified_time":54,"og_image":55,"author":61,"twitter_card":62,"twitter_misc":63,"schema":65},"- Declarative Shadow DOM шаг к простоте и гибкости. Используем Shadow DOM и стилизуем компоненты прямо в HTML, не прибегая к JavaScript.",{"index":45,"follow":46,"max-snippet":47,"max-image-preview":48,"max-video-preview":49},"index","follow","max-snippet:-1","max-image-preview:large","max-video-preview:-1","en_US","article","api.aoskin.ru","2025-06-29T11:08:59+00:00","2025-08-02T11:50:38+00:00",[56],{"width":57,"height":58,"url":59,"type":60},1184,896,"https://api.aoskin.ru/wp-content/uploads/2025/08/39-declarative-shadow-dom.webp","image/webp","aoskin","summary_large_image",{"Written by":61,"Est. reading time":64},"2 minutes",{"@context":66,"@graph":67},"https://schema.org",[68,89,101,103,112,126],{"@type":69,"@id":70,"isPartOf":71,"author":72,"headline":17,"datePublished":53,"dateModified":54,"mainEntityOfPage":74,"wordCount":75,"commentCount":76,"publisher":77,"image":78,"thumbnailUrl":59,"articleSection":80,"inLanguage":82,"potentialAction":83},"Article","https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/#article",{"@id":15},{"name":61,"@id":73},"https://api.aoskin.ru/#/schema/person/b5e1c81c85a50ca05e16fcdfa29f4861",{"@id":15},288,0,{"@id":73},{"@id":79},"https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/#primaryimage",[81],"HTML","en-US",[84],{"@type":85,"name":86,"target":87},"CommentAction","Comment",[88],"https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/#respond",{"@type":90,"@id":15,"url":15,"name":17,"isPartOf":91,"primaryImageOfPage":93,"image":94,"thumbnailUrl":59,"datePublished":53,"dateModified":54,"description":43,"breadcrumb":95,"inLanguage":82,"potentialAction":97},"WebPage",{"@id":92},"https://api.aoskin.ru/#website",{"@id":79},{"@id":79},{"@id":96},"https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/#breadcrumb",[98],{"@type":99,"target":100},"ReadAction",[15],{"@type":102,"inLanguage":82,"@id":79,"url":59,"contentUrl":59,"width":57,"height":58},"ImageObject",{"@type":104,"@id":96,"itemListElement":105},"BreadcrumbList",[106,110],{"@type":107,"position":23,"name":108,"item":109},"ListItem","Home","https://api.aoskin.ru/",{"@type":107,"position":111,"name":17},2,{"@type":113,"@id":92,"url":109,"name":114,"description":26,"publisher":115,"alternateName":114,"potentialAction":116,"inLanguage":82},"WebSite","aoskin.ru",{"@id":73},[117],{"@type":118,"target":119,"query-input":122},"SearchAction",{"@type":120,"urlTemplate":121},"EntryPoint","https://api.aoskin.ru/?s={search_term_string}",{"@type":123,"valueRequired":124,"valueName":125},"PropertyValueSpecification",true,"search_term_string",{"@type":127,"@id":73,"name":61,"image":130,"logo":133,"sameAs":134,"url":136},[128,129],"Person","Organization",{"@type":102,"inLanguage":82,"@id":131,"url":132,"contentUrl":132,"caption":61},"https://api.aoskin.ru/#/schema/person/image/","https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g",{"@id":131},[135],"http://api.aoskin.ru","https://api.aoskin.ru/author/aoskin/","https://api.aoskin.ru/wp-content/uploads/2025/08/39-declarative-shadow-dom-1024x775.webp",{"self":139,"collection":149,"about":152,"author":155,"replies":158,"version-history":161,"predecessor-version":164,"wp:featuredmedia":168,"wp:attachment":171,"wp:term":174,"curies":181},[140],{"href":141,"targetHints":142},"https://api.aoskin.ru/wp-json/wp/v2/posts/1686",{"allow":143},[144,145,146,147,148],"GET","POST","PUT","PATCH","DELETE",[150],{"href":151},"https://api.aoskin.ru/wp-json/wp/v2/posts",[153],{"href":154},"https://api.aoskin.ru/wp-json/wp/v2/types/post",[156],{"embeddable":124,"href":157},"https://api.aoskin.ru/wp-json/wp/v2/users/1",[159],{"embeddable":124,"href":160},"https://api.aoskin.ru/wp-json/wp/v2/comments?post=1686",[162],{"count":23,"href":163},"https://api.aoskin.ru/wp-json/wp/v2/posts/1686/revisions",[165],{"id":166,"href":167},1688,"https://api.aoskin.ru/wp-json/wp/v2/posts/1686/revisions/1688",[169],{"embeddable":124,"href":170},"https://api.aoskin.ru/wp-json/wp/v2/media/1687",[172],{"href":173},"https://api.aoskin.ru/wp-json/wp/v2/media?parent=1686",[175,178],{"taxonomy":176,"embeddable":124,"href":177},"category","https://api.aoskin.ru/wp-json/wp/v2/categories?post=1686",{"taxonomy":179,"embeddable":124,"href":180},"post_tag","https://api.aoskin.ru/wp-json/wp/v2/tags?post=1686",[182],{"name":183,"href":184,"templated":124},"wp","https://api.w.org/{rel}",{"author":186,"wp:featuredmedia":235,"wp:term":297},[187],{"id":23,"name":61,"url":135,"description":26,"link":136,"slug":61,"avatar_urls":188,"yoast_head":191,"yoast_head_json":192,"acf":226,"_links":227},{"24":189,"48":190,"96":132},"https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=24&d=mm&r=g","https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=48&d=mm&r=g","\u003C!-- This site is optimized with the Yoast SEO plugin v26.6 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Ctitle>aoskin, Author at api.aoskin.ru\u003C/title>\n\u003C!-- Admin only notice: this page does not show a meta description because it does not have one, either write it for this page specifically or go into the [Yoast SEO - Settings] menu and set up a template. -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://api.aoskin.ru/author/aoskin/\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:locale\" content=\"en_US\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:type\" content=\"profile\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:title\" content=\"aoskin, Author at api.aoskin.ru\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:url\" content=\"https://api.aoskin.ru/author/aoskin/\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:site_name\" content=\"api.aoskin.ru\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:image\" content=\"https://secure.gravatar.com/avatar/2facb94fc7068b47efc88c943d1949fc?s=500&d=mm&r=g\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" class=\"yoast-seo-meta-tag\" />\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"ProfilePage\",\"@id\":\"https://api.aoskin.ru/author/aoskin/\",\"url\":\"https://api.aoskin.ru/author/aoskin/\",\"name\":\"aoskin, Author at api.aoskin.ru\",\"isPartOf\":{\"@id\":\"https://api.aoskin.ru/#website\"},\"breadcrumb\":{\"@id\":\"https://api.aoskin.ru/author/aoskin/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://api.aoskin.ru/author/aoskin/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://api.aoskin.ru/author/aoskin/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://api.aoskin.ru/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Archives for aoskin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https://api.aoskin.ru/#website\",\"url\":\"https://api.aoskin.ru/\",\"name\":\"aoskin.ru\",\"description\":\"\",\"publisher\":{\"@id\":\"https://api.aoskin.ru/#/schema/person/b5e1c81c85a50ca05e16fcdfa29f4861\"},\"alternateName\":\"aoskin.ru\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https://api.aoskin.ru/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https://api.aoskin.ru/#/schema/person/b5e1c81c85a50ca05e16fcdfa29f4861\",\"name\":\"aoskin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https://api.aoskin.ru/#/schema/person/image/\",\"url\":\"https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g\",\"contentUrl\":\"https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g\",\"caption\":\"aoskin\"},\"logo\":{\"@id\":\"https://api.aoskin.ru/#/schema/person/image/\"},\"sameAs\":[\"http://api.aoskin.ru\"],\"mainEntityOfPage\":{\"@id\":\"https://api.aoskin.ru/author/aoskin/\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"title":193,"robots":194,"canonical":136,"og_locale":50,"og_type":195,"og_title":193,"og_url":136,"og_site_name":52,"og_image":196,"twitter_card":62,"schema":199},"aoskin, Author at api.aoskin.ru",{"index":45,"follow":46,"max-snippet":47,"max-image-preview":48,"max-video-preview":49},"profile",[197],{"url":198,"type":26,"width":26,"height":26},"https://secure.gravatar.com/avatar/2facb94fc7068b47efc88c943d1949fc?s=500&d=mm&r=g",{"@context":66,"@graph":200},[201,209,214,220],{"@type":202,"@id":136,"url":136,"name":193,"isPartOf":203,"breadcrumb":204,"inLanguage":82,"potentialAction":206},"ProfilePage",{"@id":92},{"@id":205},"https://api.aoskin.ru/author/aoskin/#breadcrumb",[207],{"@type":99,"target":208},[136],{"@type":104,"@id":205,"itemListElement":210},[211,212],{"@type":107,"position":23,"name":108,"item":109},{"@type":107,"position":111,"name":213},"Archives for aoskin",{"@type":113,"@id":92,"url":109,"name":114,"description":26,"publisher":215,"alternateName":114,"potentialAction":216,"inLanguage":82},{"@id":73},[217],{"@type":118,"target":218,"query-input":219},{"@type":120,"urlTemplate":121},{"@type":123,"valueRequired":124,"valueName":125},{"@type":221,"@id":73,"name":61,"image":222,"logo":223,"sameAs":224,"mainEntityOfPage":225},[128,129],{"@type":102,"inLanguage":82,"@id":131,"url":132,"contentUrl":132,"caption":61},{"@id":131},[135],{"@id":136},[],{"self":228,"collection":232},[229],{"href":157,"targetHints":230},{"allow":231},[144,145,146,147,148],[233],{"href":234},"https://api.aoskin.ru/wp-json/wp/v2/users",[236],{"id":24,"date":237,"slug":238,"type":239,"link":240,"title":241,"author":23,"featured_media":76,"acf":243,"caption":244,"alt_text":26,"media_type":245,"mime_type":60,"media_details":246,"source_url":59,"_links":277},"2025-08-02T14:49:19","39-declarative-shadow-dom","attachment","https://api.aoskin.ru/declarative-shadow-dom-stili-i-komponenty-bez-js/39-declarative-shadow-dom/",{"rendered":242},"39-declarative-shadow-DOM",[],{"rendered":26},"image",{"width":57,"height":58,"file":247,"filesize":248,"sizes":249,"image_meta":274},"2025/08/39-declarative-shadow-dom.webp",150808,{"medium":250,"large":256,"thumbnail":261,"medium_large":266,"full":272},{"file":251,"width":252,"height":253,"filesize":254,"mime_type":60,"source_url":255},"39-declarative-shadow-dom-300x227.webp",300,227,10774,"https://api.aoskin.ru/wp-content/uploads/2025/08/39-declarative-shadow-dom-300x227.webp",{"file":257,"width":258,"height":259,"filesize":260,"mime_type":60,"source_url":137},"39-declarative-shadow-dom-1024x775.webp",1024,775,136214,{"file":262,"width":263,"height":263,"filesize":264,"mime_type":60,"source_url":265},"39-declarative-shadow-dom-150x150.webp",150,4190,"https://api.aoskin.ru/wp-content/uploads/2025/08/39-declarative-shadow-dom-150x150.webp",{"file":267,"width":268,"height":269,"filesize":270,"mime_type":60,"source_url":271},"39-declarative-shadow-dom-768x581.webp",768,581,79388,"https://api.aoskin.ru/wp-content/uploads/2025/08/39-declarative-shadow-dom-768x581.webp",{"file":273,"width":57,"height":58,"mime_type":60,"source_url":59},"39-declarative-shadow-dom.webp",{"aperture":275,"credit":26,"camera":26,"caption":26,"created_timestamp":275,"copyright":26,"focal_length":275,"iso":275,"shutter_speed":275,"title":26,"orientation":275,"keywords":276},"0",[],{"self":278,"collection":282,"about":285,"author":288,"replies":290,"wp:attached-to":293,"curies":295},[279],{"href":170,"targetHints":280},{"allow":281},[144,145,146,147,148],[283],{"href":284},"https://api.aoskin.ru/wp-json/wp/v2/media",[286],{"href":287},"https://api.aoskin.ru/wp-json/wp/v2/types/attachment",[289],{"embeddable":124,"href":157},[291],{"embeddable":124,"href":292},"https://api.aoskin.ru/wp-json/wp/v2/comments?post=1687",[294],{"embeddable":124,"post_type":14,"id":5,"href":141},[296],{"name":183,"href":184,"templated":124},[298,346],[299],{"id":30,"link":300,"name":81,"slug":301,"taxonomy":176,"yoast_head":302,"yoast_head_json":303,"acf":328,"_links":329},"https://api.aoskin.ru/category/html/","html","\u003C!-- This site is optimized with the Yoast SEO plugin v26.6 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Ctitle>HTML Archives - api.aoskin.ru\u003C/title>\n\u003C!-- Admin only notice: this page does not show a meta description because it does not have one, either write it for this page specifically or go into the [Yoast SEO - Settings] menu and set up a template. -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://api.aoskin.ru/category/html/\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:locale\" content=\"en_US\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:type\" content=\"article\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:title\" content=\"HTML Archives - api.aoskin.ru\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:url\" content=\"https://api.aoskin.ru/category/html/\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:site_name\" content=\"api.aoskin.ru\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" class=\"yoast-seo-meta-tag\" />\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"CollectionPage\",\"@id\":\"https://api.aoskin.ru/category/html/\",\"url\":\"https://api.aoskin.ru/category/html/\",\"name\":\"HTML Archives - api.aoskin.ru\",\"isPartOf\":{\"@id\":\"https://api.aoskin.ru/#website\"},\"breadcrumb\":{\"@id\":\"https://api.aoskin.ru/category/html/#breadcrumb\"},\"inLanguage\":\"en-US\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://api.aoskin.ru/category/html/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://api.aoskin.ru/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https://api.aoskin.ru/#website\",\"url\":\"https://api.aoskin.ru/\",\"name\":\"aoskin.ru\",\"description\":\"\",\"publisher\":{\"@id\":\"https://api.aoskin.ru/#/schema/person/b5e1c81c85a50ca05e16fcdfa29f4861\"},\"alternateName\":\"aoskin.ru\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https://api.aoskin.ru/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https://api.aoskin.ru/#/schema/person/b5e1c81c85a50ca05e16fcdfa29f4861\",\"name\":\"aoskin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https://api.aoskin.ru/#/schema/person/image/\",\"url\":\"https://api.aoskin.ru/wp-content/uploads/2025/08/39-declarative-shadow-dom.webp\",\"contentUrl\":\"https://api.aoskin.ru/wp-content/uploads/2025/08/39-declarative-shadow-dom.webp\",\"width\":1184,\"height\":896,\"caption\":\"aoskin\"},\"logo\":{\"@id\":\"https://api.aoskin.ru/#/schema/person/image/\"},\"sameAs\":[\"http://api.aoskin.ru\"]}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"title":304,"robots":305,"canonical":300,"og_locale":50,"og_type":51,"og_title":304,"og_url":300,"og_site_name":52,"twitter_card":62,"schema":306},"HTML Archives - api.aoskin.ru",{"index":45,"follow":46,"max-snippet":47,"max-image-preview":48,"max-video-preview":49},{"@context":66,"@graph":307},[308,313,317,323],{"@type":309,"@id":300,"url":300,"name":304,"isPartOf":310,"breadcrumb":311,"inLanguage":82},"CollectionPage",{"@id":92},{"@id":312},"https://api.aoskin.ru/category/html/#breadcrumb",{"@type":104,"@id":312,"itemListElement":314},[315,316],{"@type":107,"position":23,"name":108,"item":109},{"@type":107,"position":111,"name":81},{"@type":113,"@id":92,"url":109,"name":114,"description":26,"publisher":318,"alternateName":114,"potentialAction":319,"inLanguage":82},{"@id":73},[320],{"@type":118,"target":321,"query-input":322},{"@type":120,"urlTemplate":121},{"@type":123,"valueRequired":124,"valueName":125},{"@type":324,"@id":73,"name":61,"image":325,"logo":326,"sameAs":327},[128,129],{"@type":102,"inLanguage":82,"@id":131,"url":59,"contentUrl":59,"width":57,"height":58,"caption":61},{"@id":131},[135],[],{"self":330,"collection":335,"about":338,"wp:post_type":341,"curies":344},[331],{"href":332,"targetHints":333},"https://api.aoskin.ru/wp-json/wp/v2/categories/15",{"allow":334},[144,145,146,147,148],[336],{"href":337},"https://api.aoskin.ru/wp-json/wp/v2/categories",[339],{"href":340},"https://api.aoskin.ru/wp-json/wp/v2/taxonomies/category",[342],{"href":343},"https://api.aoskin.ru/wp-json/wp/v2/posts?categories=15",[345],{"name":183,"href":184,"templated":124},[],1766752309606]