{"id":25015,"date":"2024-02-16T14:41:33","date_gmt":"2024-02-16T13:41:33","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/domina-el-shadow-dom-estilizacion-y-encapsulamiento-en-componentes-web\/"},"modified":"2024-06-03T17:38:51","modified_gmt":"2024-06-03T16:38:51","slug":"domina-el-shadow-dom-estilizacion-y-encapsulamiento-en-componentes-web","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/master-shadow-dom-stylization-and-encapsulation-in-web-components\/","title":{"rendered":"Master the Shadow DOM: Stylization and Encapsulation in Web Components"},"content":{"rendered":"<p>Web development has advanced significantly in the last decade, transforming the way developers build applications. At the forefront of these innovations is the Shadow DOM, a web technology that allows for better encapsulation and reusability in web components. Shadow DOM implementation and styling are crucial aspects for modern developers looking to create robust and maintainable user interfaces.<\/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\/master-shadow-dom-stylization-and-encapsulation-in-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-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-shadow-dom-stylization-and-encapsulation-in-web-components\/#Creando_tu_primer_Shadow_DOM\" >Creating your first 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\/master-shadow-dom-stylization-and-encapsulation-in-web-components\/#Estilizacion_de_Componentes_con_Shadow_DOM\" >Styling Components with Shadow DOM<\/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\/master-shadow-dom-stylization-and-encapsulation-in-web-components\/#Casos_Practicos_del_Uso_del_Shadow_DOM\" >Practical Cases of Using the Shadow DOM<\/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\/master-shadow-dom-stylization-and-encapsulation-in-web-components\/#Mejores_Practicas_en_el_Uso_del_Shadow_DOM\" >Best Practices in Using the Shadow DOM<\/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\/master-shadow-dom-stylization-and-encapsulation-in-web-components\/#Herramientas_y_Librerias_para_Trabajar_con_Shadow_DOM\" >Tools and Libraries to Work with Shadow DOM<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-shadow-dom-stylization-and-encapsulation-in-web-components\/#Conclusiones_y_Recursos_Adicionales\" >Conclusions and Additional Resources<\/a><\/li><\/ul><\/nav><\/div>\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>To understand the need and functionality of the Shadow DOM, it is essential to start with a clear definition. In simple terms, the Shadow DOM is a DOM subtree that is attached to a DOM element, but operates in isolation from the main document. This means that styles and scripts defined within the Shadow DOM have no effect on the rest of the document, and vice versa. This level of encapsulation allows developers to modularize their code and avoid conflicts between styles and scripts.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Creando_tu_primer_Shadow_DOM\"><\/span>Creating your first Shadow DOM<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To get started with Shadow DOM, you should have a basic understanding of HTML, CSS, and JavaScript. Below I will guide you through the steps to create a web component with Shadow DOM:<\/p>\n<ol>\n<li>\n<p><strong>Define the Container Domain:<\/strong> Start by creating a custom element using JavaScript and the method <code>customElements.define<\/code>. This will be the container for your Shadow DOM.<\/p>\n<\/li>\n<li>\n<p><strong>Attach the Shadow Root:<\/strong> Use the method <code>attachShadow<\/code> above your component to add the Shadow Root. As a rule, the mode is established in <code>open<\/code>, but you can also use <code>closed<\/code> for greater encapsulation.<\/p>\n<\/li>\n<li>\n<p><strong>Add the Content to the Shadow DOM:<\/strong> Once you have Shadow Root, you can start adding HTML content and CSS styles. You do this by creating a template and using <code>innerHTML<\/code> or adopting nodes from the main document.<\/p>\n<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Estilizacion_de_Componentes_con_Shadow_DOM\"><\/span>Styling Components with Shadow DOM<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The true power of the Shadow DOM lies in its ability to keep styles encapsulated, allowing customization without fear of collisions with the rest of the document. Here are some tips to make the most of Shadow DOM styling:<\/p>\n<ol>\n<li>\n<p><strong>CSS variables:<\/strong> Uses CSS variables to allow customization of styles from the main document. This makes it easier to reuse and adjust components.<\/p>\n<\/li>\n<li>\n<p><strong>Part Selectors:<\/strong> Use the selector <code>::part<\/code> to expose specific Shadow DOM elements to the main document, making it possible to customize styles at specific points without breaking encapsulation.<\/p>\n<\/li>\n<li>\n<p><strong>Complete Encapsulation:<\/strong> Although it is possible to puncture the Shadow DOM with <code>::slotted<\/code>, the ideal is to maintain complete encapsulation to avoid surprises and maintain the integrity of the component.<\/p>\n<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Casos_Practicos_del_Uso_del_Shadow_DOM\"><\/span>Practical Cases of Using the Shadow DOM<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To understand the impact of the Shadow DOM, we will explore some cases where its use is particularly beneficial:<\/p>\n<ol>\n<li>\n<p><strong>Reusable Components:<\/strong> Shadow DOM encapsulation is perfect for creating component libraries that can be reused in different applications without worrying about style contamination.<\/p>\n<\/li>\n<li>\n<p><strong>Third Party Widgets:<\/strong> When integrating third-party widgets, the Shadow DOM allows peaceful coexistence with the rest of the application, avoiding conflicts with existing CSS and JavaScript.<\/p>\n<\/li>\n<li>\n<p><strong>Theme Styles:<\/strong> For applications that require interchangeable themes, the Shadow DOM provides a method to change styles in isolation, making it easier to manage different color schemes and fonts.<\/p>\n<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Mejores_Practicas_en_el_Uso_del_Shadow_DOM\"><\/span>Best Practices in Using the Shadow DOM<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When developing with Shadow DOM, it is crucial to follow certain best practices:<\/p>\n<ol>\n<li>\n<p><strong>Accessibility:<\/strong> Ensure that content within the Shadow DOM is accessible, using ARIA attributes and ensuring proper keyboard navigation.<\/p>\n<\/li>\n<li>\n<p><strong>Performance:<\/strong> Monitor how the use of the Shadow DOM affects the performance of your application. While there are benefits to encapsulation, there may also be a cost associated with handling the additional DOM.<\/p>\n<\/li>\n<li>\n<p><strong>Testing and Maintenance:<\/strong> Like any other technology, a component with Shadow DOM must be tested extensively. Implement automated tests to ensure that it continues to behave as expected after changes or updates.<\/p>\n<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Herramientas_y_Librerias_para_Trabajar_con_Shadow_DOM\"><\/span>Tools and Libraries to Work with Shadow DOM<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Numerous tools and libraries make it easier to work with the Shadow DOM and create web components:<\/p>\n<ol>\n<li>\n<p><strong>Polymer:<\/strong> Although no longer as prominent as it once was, Polymer was one of the first libraries to advocate the use of Shadow DOM and web components.<\/p>\n<\/li>\n<li>\n<p><strong>LiteElement:<\/strong> Developed by the same teams behind Polymer, LitElement is a lightweight, modern library for creating web components with ease.<\/p>\n<\/li>\n<li>\n<p><strong>Stencil.js:<\/strong> This web component compiler makes it easy to create components that are compatible with various frameworks and libraries without depending on one in particular.<\/p>\n<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Conclusiones_y_Recursos_Adicionales\"><\/span>Conclusions and Additional Resources<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>As we have seen, the Shadow DOM is an essential tool in the toolbox of any modern web developer. Its ability to encapsulate and modularize code not only improves reusability, but also lays the foundation for more sustainable and maintainable applications.<\/p>\n<p>If you want to delve deeper into this topic or have questions, feel free to consult other articles on web development at <a href=\"https:\/\/nelkodev.com\/en\/\">NelkoDev<\/a> or get in touch via <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">NelkoDev Contact<\/a>.<\/p>\n<p>The Shadow DOM awaits you to explore a world of possibilities in the development of web components. Dive in and discover how it can transform your development approach today!<\/p>","protected":false},"excerpt":{"rendered":"<p>El desarrollo web ha avanzado significativamente en la \u00faltima d\u00e9cada, transformando la forma en que los desarrolladores construyen aplicaciones. A la vanguardia de estas innovaciones se encuentra el Shadow DOM, una tecnolog\u00eda web que permite un mejor encapsulamiento y reusabilidad en los componentes web. La implementaci\u00f3n y estilizaci\u00f3n del Shadow DOM son aspectos cruciales para [&hellip;]<\/p>","protected":false},"author":1,"featured_media":25016,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420],"tags":[205,669,743,1473,1663,1664,722,47],"class_list":["post-25015","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-blog","tag-componentes","tag-dom","tag-domina","tag-encapsulamiento","tag-estilizacion","tag-shadow","tag-web"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/25015","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=25015"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/25015\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/25016"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=25015"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=25015"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=25015"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}