[{"data":1,"prerenderedAt":349},["ShallowReactive",2],{"tWwx2gZWU0":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":30,"tags":32,"class_list":33,"acf":41,"yoast_head":42,"yoast_head_json":43,"featured_media_src_url":137,"_links":138,"_embedded":185},1689,"2025-06-29T14:50:47","2025-06-29T11:50:47",{"rendered":9},"https://api.aoskin.ru/?p=1689","2025-08-02T15:01:00","2025-08-02T12:01:00","declarative-shadow-dom-styles-and-components-without-js","publish","post","https://api.aoskin.ru/en/declarative-shadow-dom-styles-and-components-without-js/",{"rendered":17},"Declarative Shadow DOM: Styles and Components Without JS",{"rendered":19,"protected":20},"\n\u003Ch2 class=\"wp-block-heading\">What is Declarative Shadow DOM?\u003C/h2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Declarative Shadow DOM is the ability to describe the Shadow DOM structure directly in HTML markup using the \u003Ccode><template>\u003C/code> tag and the \u003Ccode>shadowrootmode=\"open\"\u003C/code> attribute. This approach allows the browser to immediately display the content without waiting for the JS code to execute.\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>Text into Shadow DOM!</p>\n  </template>\n</div>\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">As a result, the paragraph content will be coral in color and will be isolated from the global page styles.\u003C/p>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Advantages of Declarative Shadow DOM:\u003C/h2>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>\u003Cstrong>Performance:\u003C/strong> Content is rendered immediately, without the delays that are usually associated with JS execution.\u003C/li>\n\n\n\n\u003Cli>\u003Cstrong>Style isolation:\u003C/strong> Styles inside the Shadow DOM do not conflict with the global page styles.\u003C/li>\n\n\n\n\u003Cli>\u003Cstrong>SSR convenience:\u003C/strong> Ideal for server-side rendering (SSR), as it does not require additional JS code to activate components.\u003C/li>\n\u003C/ul>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">How to embed styles without JavaScript?\u003C/h2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">You just need to place the CSS inside the tag \u003Ccode><style>\u003C/code> or use the tag \u003Ccode><link>\u003C/code> in the template with the \u003Ccode>shadowrootmode\u003C/code> attribute. The browser will automatically apply them to the Shadow DOM content, completely isolating the styles:\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 class=\"wp-block-paragraph\">In addition, styles defined this way are highly optimized by the browser. If the same stylesheet is used in multiple declarative Shadow DOM components, the browser only downloads and parses it once. This is because the browser uses a common CSSStyleSheet instance for all shadow roots, which saves memory and eliminates unnecessary resource costs.\u003C/p>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Where is Declarative Shadow DOM especially useful?\u003C/h2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>UI components:\u003C/strong>\u003C/p>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>Custom buttons with style isolation\u003C/li>\n\n\n\n\u003Cli>Modal windows, tooltips\u003C/li>\n\n\n\n\u003Cli>Accordions and drop-down sections\u003C/li>\n\u003C/ul>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>Content blocks:\u003C/strong>\u003C/p>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>Product, article or profile cards\u003C/li>\n\n\n\n\u003Cli>Feed elements: posts, comments\u003C/li>\n\u003C/ul>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>Interactive elements without JS:\u003C/strong>\u003C/p>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>Rating stars\u003C/li>\n\n\n\n\u003Cli>Tab panels with switching\u003C/li>\n\u003C/ul>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>Forms and fields:\u003C/strong>\u003C/p>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>Authorization forms, subscriptions\u003C/li>\n\n\n\n\u003Cli>Custom checkboxes, radio buttons, switches\u003C/li>\n\u003C/ul>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>Banners and notifications:\u003C/strong>\u003C/p>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>Cookie messages\u003C/li>\n\n\n\n\u003Cli>Notifications, toast blocks\u003C/li>\n\u003C/ul>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Due to isolation and ease of implementation, such components can be used even without connecting JavaScript – for example, in static sites or projects with an emphasis on SSR.\u003C/p>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Conclusion\u003C/h2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Using Declarative Shadow DOM, you can simplify component development, speed up rendering, and provide strong style isolation without writing additional JavaScript.\u003C/p>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">\u003C/p>\n",false,{"rendered":22,"protected":20},"\u003Cp>With the introduction of Declarative Shadow DOM, web development has taken another step forward in simplicity and flexibility. You can now use Shadow DOM and style components directly in HTML without resorting to JavaScript.\u003C/p>\n",1,1687,"open","","standard",{"_acf_changed":20,"_yoast_wpseo_focuskw":26,"_yoast_wpseo_title":26,"_yoast_wpseo_metadesc":29,"footnotes":26},"%%sep%% DS DOM is a step towards simplicity and flexibility. Use Shadow DOM and style components directly in HTML without resorting to JavaScript.",[31],46,[],[34,14,35,36,37,38,39,40],"post-1689","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-en",[],"\u003C!-- This site is optimized with the Yoast SEO plugin v27.8 - https://yoast.com/product/yoast-seo-wordpress/ -->\n\u003Ctitle>Declarative Shadow DOM: Styles and Components Without JS\u003C/title>\n\u003Cmeta name=\"description\" content=\"- DS DOM is a step towards simplicity and flexibility. Use Shadow DOM and style components directly in HTML without resorting to 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/en/declarative-shadow-dom-styles-and-components-without-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: Styles and Components Without JS\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:description\" content=\"- DS DOM is a step towards simplicity and flexibility. Use Shadow DOM and style components directly in HTML without resorting to JavaScript.\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"og:url\" content=\"https://api.aoskin.ru/en/declarative-shadow-dom-styles-and-components-without-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:50:47+00:00\" class=\"yoast-seo-meta-tag\" />\n\u003Cmeta property=\"article:modified_time\" content=\"2025-08-02T12:01:00+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\\/en\\/declarative-shadow-dom-styles-and-components-without-js\\/#article\",\"isPartOf\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/en\\/declarative-shadow-dom-styles-and-components-without-js\\/\"},\"author\":{\"name\":\"aoskin\",\"@id\":\"https:\\/\\/api.aoskin.ru\\/#\\/schema\\/person\\/b5e1c81c85a50ca05e16fcdfa29f4861\"},\"headline\":\"Declarative Shadow DOM: Styles and Components Without JS\",\"datePublished\":\"2025-06-29T11:50:47+00:00\",\"dateModified\":\"2025-08-02T12:01:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/en\\/declarative-shadow-dom-styles-and-components-without-js\\/\"},\"wordCount\":333,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/#\\/schema\\/person\\/b5e1c81c85a50ca05e16fcdfa29f4861\"},\"image\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/en\\/declarative-shadow-dom-styles-and-components-without-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\\/en\\/declarative-shadow-dom-styles-and-components-without-js\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\/\\/api.aoskin.ru\\/en\\/declarative-shadow-dom-styles-and-components-without-js\\/\",\"url\":\"https:\\/\\/api.aoskin.ru\\/en\\/declarative-shadow-dom-styles-and-components-without-js\\/\",\"name\":\"Declarative Shadow DOM: Styles and Components Without JS\",\"isPartOf\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/en\\/declarative-shadow-dom-styles-and-components-without-js\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/en\\/declarative-shadow-dom-styles-and-components-without-js\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\/\\/api.aoskin.ru\\/wp-content\\/uploads\\/2025\\/08\\/39-declarative-shadow-dom.webp\",\"datePublished\":\"2025-06-29T11:50:47+00:00\",\"dateModified\":\"2025-08-02T12:01:00+00:00\",\"description\":\"- DS DOM is a step towards simplicity and flexibility. Use Shadow DOM and style components directly in HTML without resorting to JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/en\\/declarative-shadow-dom-styles-and-components-without-js\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\/\\/api.aoskin.ru\\/en\\/declarative-shadow-dom-styles-and-components-without-js\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\/\\/api.aoskin.ru\\/en\\/declarative-shadow-dom-styles-and-components-without-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\\/en\\/declarative-shadow-dom-styles-and-components-without-js\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\/\\/api.aoskin.ru\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Declarative Shadow DOM: Styles and Components Without 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:\\/\\/secure.gravatar.com\\/avatar\\/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g\",\"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:\\/\\/secure.gravatar.com\\/avatar\\/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g\"},\"sameAs\":[\"http:\\/\\/api.aoskin.ru\"],\"url\":\"https:\\/\\/api.aoskin.ru\\/author\\/aoskin\\/\"}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"title":17,"description":44,"robots":45,"canonical":15,"og_locale":51,"og_type":52,"og_title":17,"og_description":44,"og_url":15,"og_site_name":53,"article_published_time":54,"article_modified_time":55,"og_image":56,"author":62,"twitter_card":63,"twitter_misc":64,"schema":66},"- DS DOM is a step towards simplicity and flexibility. Use Shadow DOM and style components directly in HTML without resorting to JavaScript.",{"index":46,"follow":47,"max-snippet":48,"max-image-preview":49,"max-video-preview":50},"index","follow","max-snippet:-1","max-image-preview:large","max-video-preview:-1","en_US","article","api.aoskin.ru","2025-06-29T11:50:47+00:00","2025-08-02T12:01:00+00:00",[57],{"width":58,"height":59,"url":60,"type":61},1184,896,"https://api.aoskin.ru/wp-content/uploads/2025/08/39-declarative-shadow-dom.webp","image/webp","aoskin","summary_large_image",{"Written by":62,"Est. reading time":65},"2 minutes",{"@context":67,"@graph":68},"https://schema.org",[69,90,102,104,113,127],{"@type":70,"@id":71,"isPartOf":72,"author":73,"headline":17,"datePublished":54,"dateModified":55,"mainEntityOfPage":75,"wordCount":76,"commentCount":77,"publisher":78,"image":79,"thumbnailUrl":60,"articleSection":81,"inLanguage":83,"potentialAction":84},"Article","https://api.aoskin.ru/en/declarative-shadow-dom-styles-and-components-without-js/#article",{"@id":15},{"name":62,"@id":74},"https://api.aoskin.ru/#/schema/person/b5e1c81c85a50ca05e16fcdfa29f4861",{"@id":15},333,0,{"@id":74},{"@id":80},"https://api.aoskin.ru/en/declarative-shadow-dom-styles-and-components-without-js/#primaryimage",[82],"HTML","en-US",[85],{"@type":86,"name":87,"target":88},"CommentAction","Comment",[89],"https://api.aoskin.ru/en/declarative-shadow-dom-styles-and-components-without-js/#respond",{"@type":91,"@id":15,"url":15,"name":17,"isPartOf":92,"primaryImageOfPage":94,"image":95,"thumbnailUrl":60,"datePublished":54,"dateModified":55,"description":44,"breadcrumb":96,"inLanguage":83,"potentialAction":98},"WebPage",{"@id":93},"https://api.aoskin.ru/#website",{"@id":80},{"@id":80},{"@id":97},"https://api.aoskin.ru/en/declarative-shadow-dom-styles-and-components-without-js/#breadcrumb",[99],{"@type":100,"target":101},"ReadAction",[15],{"@type":103,"inLanguage":83,"@id":80,"url":60,"contentUrl":60,"width":58,"height":59},"ImageObject",{"@type":105,"@id":97,"itemListElement":106},"BreadcrumbList",[107,111],{"@type":108,"position":23,"name":109,"item":110},"ListItem","Home","https://api.aoskin.ru/",{"@type":108,"position":112,"name":17},2,{"@type":114,"@id":93,"url":110,"name":115,"description":26,"publisher":116,"alternateName":115,"potentialAction":117,"inLanguage":83},"WebSite","aoskin.ru",{"@id":74},[118],{"@type":119,"target":120,"query-input":123},"SearchAction",{"@type":121,"urlTemplate":122},"EntryPoint","https://api.aoskin.ru/?s={search_term_string}",{"@type":124,"valueRequired":125,"valueName":126},"PropertyValueSpecification",true,"search_term_string",{"@type":128,"@id":74,"name":62,"image":131,"logo":133,"sameAs":134,"url":136},[129,130],"Person","Organization",{"@type":103,"inLanguage":83,"@id":132,"url":132,"contentUrl":132,"caption":62},"https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g",{"@id":132},[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/1689",{"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":125,"href":157},"https://api.aoskin.ru/wp-json/wp/v2/users/1",[159],{"embeddable":125,"href":160},"https://api.aoskin.ru/wp-json/wp/v2/comments?post=1689",[162],{"count":23,"href":163},"https://api.aoskin.ru/wp-json/wp/v2/posts/1689/revisions",[165],{"id":166,"href":167},1690,"https://api.aoskin.ru/wp-json/wp/v2/posts/1689/revisions/1690",[169],{"embeddable":125,"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=1689",[175,178],{"taxonomy":176,"embeddable":125,"href":177},"category","https://api.aoskin.ru/wp-json/wp/v2/categories?post=1689",{"taxonomy":179,"embeddable":125,"href":180},"post_tag","https://api.aoskin.ru/wp-json/wp/v2/tags?post=1689",[182],{"name":183,"href":184,"templated":125},"wp","https://api.w.org/{rel}",{"author":186,"wp:featuredmedia":235,"wp:term":299},[187],{"id":23,"name":62,"url":135,"description":26,"link":136,"slug":62,"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 v27.8 - https://yoast.com/product/yoast-seo-wordpress/ -->\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/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?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:\\/\\/secure.gravatar.com\\/avatar\\/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g\",\"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:\\/\\/secure.gravatar.com\\/avatar\\/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=96&d=mm&r=g\"},\"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":51,"og_type":195,"og_title":193,"og_url":136,"og_site_name":53,"og_image":196,"twitter_card":63,"schema":199},"aoskin, Author at api.aoskin.ru",{"index":46,"follow":47,"max-snippet":48,"max-image-preview":49,"max-video-preview":50},"profile",[197],{"url":198,"type":26,"width":26,"height":26},"https://secure.gravatar.com/avatar/e5e502e32ef7d2bf805592a42dd48d98a3587a37b0e98191f187c9c37e7529fb?s=500&d=mm&r=g",{"@context":67,"@graph":200},[201,209,214,220],{"@type":202,"@id":136,"url":136,"name":193,"isPartOf":203,"breadcrumb":204,"inLanguage":83,"potentialAction":206},"ProfilePage",{"@id":93},{"@id":205},"https://api.aoskin.ru/author/aoskin/#breadcrumb",[207],{"@type":100,"target":208},[136],{"@type":105,"@id":205,"itemListElement":210},[211,212],{"@type":108,"position":23,"name":109,"item":110},{"@type":108,"position":112,"name":213},"Archives for aoskin",{"@type":114,"@id":93,"url":110,"name":115,"description":26,"publisher":215,"alternateName":115,"potentialAction":216,"inLanguage":83},{"@id":74},[217],{"@type":119,"target":218,"query-input":219},{"@type":121,"urlTemplate":122},{"@type":124,"valueRequired":125,"valueName":126},{"@type":221,"@id":74,"name":62,"image":222,"logo":223,"sameAs":224,"mainEntityOfPage":225},[129,130],{"@type":103,"inLanguage":83,"@id":132,"url":132,"contentUrl":132,"caption":62},{"@id":132},[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":77,"acf":243,"caption":244,"alt_text":26,"media_type":245,"mime_type":61,"media_details":246,"source_url":60,"_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":58,"height":59,"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":61,"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":61,"source_url":137},"39-declarative-shadow-dom-1024x775.webp",1024,775,136214,{"file":262,"width":263,"height":263,"filesize":264,"mime_type":61,"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":61,"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":58,"height":59,"mime_type":61,"source_url":60},"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":297},[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":125,"href":157},[291],{"embeddable":125,"href":292},"https://api.aoskin.ru/wp-json/wp/v2/comments?post=1687",[294],{"embeddable":125,"post_type":14,"id":295,"href":296},1686,"https://api.aoskin.ru/wp-json/wp/v2/posts/1686",[298],{"name":183,"href":184,"templated":125},[300,348],[301],{"id":31,"link":302,"name":82,"slug":303,"taxonomy":176,"yoast_head":304,"yoast_head_json":305,"acf":330,"_links":331},"https://api.aoskin.ru/en/category/html-en/","html-en","\u003C!-- This site is optimized with the Yoast SEO plugin v27.8 - https://yoast.com/product/yoast-seo-wordpress/ -->\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/en/category/html-en/\" 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/en/category/html-en/\" 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\\/en\\/category\\/html-en\\/\",\"url\":\"https:\\/\\/api.aoskin.ru\\/en\\/category\\/html-en\\/\",\"name\":\"HTML Archives - api.aoskin.ru\",\"isPartOf\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\/\\/api.aoskin.ru\\/en\\/category\\/html-en\\/#breadcrumb\"},\"inLanguage\":\"en-US\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\/\\/api.aoskin.ru\\/en\\/category\\/html-en\\/#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\\/wp-content\\/uploads\\/2025\\/08\\/39-declarative-shadow-dom.webp\",\"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\\/wp-content\\/uploads\\/2025\\/08\\/39-declarative-shadow-dom.webp\"},\"sameAs\":[\"http:\\/\\/api.aoskin.ru\"]}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"title":306,"robots":307,"canonical":302,"og_locale":51,"og_type":52,"og_title":306,"og_url":302,"og_site_name":53,"twitter_card":63,"schema":308},"HTML Archives - api.aoskin.ru",{"index":46,"follow":47,"max-snippet":48,"max-image-preview":49,"max-video-preview":50},{"@context":67,"@graph":309},[310,315,319,325],{"@type":311,"@id":302,"url":302,"name":306,"isPartOf":312,"breadcrumb":313,"inLanguage":83},"CollectionPage",{"@id":93},{"@id":314},"https://api.aoskin.ru/en/category/html-en/#breadcrumb",{"@type":105,"@id":314,"itemListElement":316},[317,318],{"@type":108,"position":23,"name":109,"item":110},{"@type":108,"position":112,"name":82},{"@type":114,"@id":93,"url":110,"name":115,"description":26,"publisher":320,"alternateName":115,"potentialAction":321,"inLanguage":83},{"@id":74},[322],{"@type":119,"target":323,"query-input":324},{"@type":121,"urlTemplate":122},{"@type":124,"valueRequired":125,"valueName":126},{"@type":326,"@id":74,"name":62,"image":327,"logo":328,"sameAs":329},[129,130],{"@type":103,"inLanguage":83,"@id":60,"url":60,"contentUrl":60,"width":58,"height":59,"caption":62},{"@id":60},[135],[],{"self":332,"collection":337,"about":340,"wp:post_type":343,"curies":346},[333],{"href":334,"targetHints":335},"https://api.aoskin.ru/wp-json/wp/v2/categories/46",{"allow":336},[144,145,146,147,148],[338],{"href":339},"https://api.aoskin.ru/wp-json/wp/v2/categories",[341],{"href":342},"https://api.aoskin.ru/wp-json/wp/v2/taxonomies/category",[344],{"href":345},"https://api.aoskin.ru/wp-json/wp/v2/posts?categories=46",[347],{"name":183,"href":184,"templated":125},[],1782055333869]