{"id":23965,"date":"2024-02-18T01:15:04","date_gmt":"2024-02-18T00:15:04","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/shadow-dom-y-css-parts-una-introduccion-a-los-web-components\/"},"modified":"2024-06-03T18:44:15","modified_gmt":"2024-06-03T17:44:15","slug":"shadow-dom-y-css-parts-una-introduccion-a-los-web-components","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/shadow-dom-and-css-parts-an-introduction-to-web-components\/","title":{"rendered":"Shadow DOM and CSS Parts: An Introduction to Web Components"},"content":{"rendered":"<p>In the world of web development, Web Components have become a very useful tool for creating custom and reusable user interfaces. One of the most powerful features of Web Components is the Shadow DOM and CSS Parts, which allow styles and behaviors to be encapsulated effectively. In this article, we will explore what Shadow DOM and CSS Parts are and how they are used in Web Components development.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/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: #ffffff;color:#ffffff\" 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: #ffffff;color:#ffffff\" 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:\/\/nelkodev.com\/en\/blog\/shadow-dom-and-css-parts-an-introduction-to-web-components\/#%C2%BFQue_son_los_Web_Components\" >What are Web Components?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/shadow-dom-and-css-parts-an-introduction-to-web-components\/#%C2%BFQue_es_el_Shadow_DOM\" >What is Shadow DOM?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/shadow-dom-and-css-parts-an-introduction-to-web-components\/#%C2%BFQue_son_las_CSS_Parts\" >What are CSS Parts?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/shadow-dom-and-css-parts-an-introduction-to-web-components\/#Utilizando_el_Shadow_DOM_y_CSS_Parts_en_Web_Components\" >Using the Shadow DOM and CSS Parts in Web Components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/shadow-dom-and-css-parts-an-introduction-to-web-components\/#Conclusion\" >Conclusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/shadow-dom-and-css-parts-an-introduction-to-web-components\/#Preguntas_frecuentes\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/shadow-dom-and-css-parts-an-introduction-to-web-components\/#%C2%BFQue_son_los_Web_Components-2\" >What are Web Components?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/shadow-dom-and-css-parts-an-introduction-to-web-components\/#%C2%BFPara_que_se_utiliza_el_Shadow_DOM\" >What is the Shadow DOM used for?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/shadow-dom-and-css-parts-an-introduction-to-web-components\/#%C2%BFQue_son_las_CSS_Parts-2\" >What are CSS Parts?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/shadow-dom-and-css-parts-an-introduction-to-web-components\/#%C2%BFComo_se_utilizan_las_CSS_Parts\" >How are CSS Parts used?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nelkodev.com\/en\/blog\/shadow-dom-and-css-parts-an-introduction-to-web-components\/#%C2%BFComo_se_crea_un_Web_Component_con_Shadow_DOM_y_CSS_Parts\" >How do you create a Web Component with Shadow DOM and CSS Parts?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_son_los_Web_Components\"><\/span>What are Web Components?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Web Components are a set of technologies that allow you to create custom and reusable HTML elements. These elements encapsulate its behavior, structure, and style, making them easily usable in any web project. Web Components consist of three main specifications: Custom Elements, Shadow DOM and Templates.<\/p>\n<p>In this article we will focus on the Shadow DOM and CSS Parts, two of the most important components of Web Components.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_el_Shadow_DOM\"><\/span>What is Shadow DOM?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The Shadow DOM is a kind of &quot;shadow domain&quot; within an HTML element. It allows you to encapsulate the style and behavior of a web component, preventing the styles and events defined within the component from affecting the rest of the document.<\/p>\n<p>The Shadow DOM is created using the HTML ` element<code>&lt;template&gt;<\/code>` and the ` method<code>attachShadow()<\/code>` in JavaScript. The template defines the structure of the component and the ` method<code>attachShadow()<\/code>` creates a shadowed DOM inside the element, where the component&#039;s styles and behaviors are placed.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_son_las_CSS_Parts\"><\/span>What are CSS Parts?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CSS Parts are a feature of the Shadow DOM that allow, similar to CSS classes, to stylize specific parts of a web component. Parts are defined using the `::part()` pseudo-class in the component&#039;s CSS.<\/p>\n<p>CSS Parts are useful when we want to style a web component in a more granular and reusable way, without worrying about the internal structure of the component.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Utilizando_el_Shadow_DOM_y_CSS_Parts_en_Web_Components\"><\/span>Using the Shadow DOM and CSS Parts in Web Components<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To use the Shadow DOM and CSS Parts in a Web Component, we must first define the component using the Custom Elements API. Then, in the `connectedCallback()` method, we create the Shadow DOM and add the necessary CSS to style the component.<\/p>\n<p>Next, we can use CSS Parts to style specific parts of the component. For example, if we have a button component with two parts: the text part and the background part, we can style each part independently using CSS Parts.<\/p>\n<pre>\n<code>button::part(text) {\n      font-weight: bold;\n    }\n    \n    button::part(background) {\n      background-color: blue;\n    }\n  \n\n  <button>\n    \n  <\/button>\n<\/code>\n<\/pre>\n<p>In the example above, the button component has two parts: `text` and `background`. Using CSS Parts, we are styling the button text bold and the background blue. This allows us to easily reuse styles in other button components in our application.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Shadow DOM and CSS Parts are two powerful features of Web Components that allow you to encapsulate styles and behaviors effectively. Using these technologies, we can create reusable and customizable web components, making the development of modern user interfaces much easier.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFQue_son_los_Web_Components-2\"><\/span>What are Web Components?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Web Components are a set of technologies that allow you to create custom and reusable HTML elements.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFPara_que_se_utiliza_el_Shadow_DOM\"><\/span>What is the Shadow DOM used for?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The Shadow DOM is used to encapsulate the style and behavior of a web component, preventing it from affecting the rest of the document.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFQue_son_las_CSS_Parts-2\"><\/span>What are CSS Parts?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>CSS Parts are a feature of the Shadow DOM that allow you to style specific parts of a web component in a more granular and reusable way.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo_se_utilizan_las_CSS_Parts\"><\/span>How are CSS Parts used?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>CSS Parts are used by defining specific parts of the component using the `::part()` pseudo-class in the component&#039;s CSS. These parts can then be styled independently.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo_se_crea_un_Web_Component_con_Shadow_DOM_y_CSS_Parts\"><\/span>How do you create a Web Component with Shadow DOM and CSS Parts?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To create a Web Component with Shadow DOM and CSS Parts, we must first define the component using the Custom Elements API. Then, in the `connectedCallback()` method, we create the Shadow DOM and add the necessary CSS to style the component. Finally, we use CSS Parts to style specific parts of the component.<\/p>\n<p>I hope this article has helped you understand what Shadow DOM and CSS Parts are and how they are used in Web Components development. If you have any questions or comments, feel free to leave them below.<\/p>\n<p>Remember that you can find more articles about programming and marketing at <a href=\"https:\/\/nelkodev.com\/en\/\">nelkodev.com<\/a>. You can also contact me through <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">nelkodev.com\/contact<\/a> or consult my portfolio at <a href=\"https:\/\/nelkodev.com\/en\/portfolio\/\">nelkodev.com\/portfolio\/<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>In the world of web development, Web Components have become a very useful tool for creating custom and reusable user interfaces. One of the most powerful features of Web Components is the Shadow DOM and CSS Parts, which allows you to effectively encapsulate styles and behaviors. In this article, we will explore the different aspects of Web Components [\u2026]<\/p>","protected":false},"author":1,"featured_media":23966,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,2207,1127],"tags":[205,886,519,743,545,221,2208,1146,722,37,47,742],"class_list":["post-23965","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-nodejs","category-webcomponents","tag-blog","tag-components","tag-css","tag-dom","tag-introduccion","tag-los","tag-nodejs","tag-parts","tag-shadow","tag-una","tag-web","tag-webcomponents"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=23965"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23965\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/23966"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=23965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=23965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=23965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}