{"id":23432,"date":"2024-03-23T23:10:30","date_gmt":"2024-03-23T22:10:30","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/shadow-dom-css-scoping-en-web-components\/"},"modified":"2024-06-03T17:33:29","modified_gmt":"2024-06-03T16:33:29","slug":"shadow-dom-css-scoping-en-web-components","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/shadow-dom-css-scoping-in-web-components\/","title":{"rendered":"Shadow DOM: CSS Scoping in Web Components"},"content":{"rendered":"<p>In the world of web development, creating reusable and modular components is essential to building robust and scalable applications. The <a href=\"https:\/\/nelkodev.com\/en\/\">Web Components<\/a> They are a technology that allows us to encapsulate HTML, CSS and JavaScript in custom elements, facilitating their reuse and promoting better code organization.<\/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-css-scoping-in-web-components\/#%C2%BFQue_es_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\/shadow-dom-css-scoping-in-web-components\/#Utilizando_CSS_Scoping_en_Shadow_DOM\" >Using CSS Scoping in 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-css-scoping-in-web-components\/#Javascript_en_espanol_para_trabajar_con_Shadow_DOM\" >Javascript in Spanish 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-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/shadow-dom-css-scoping-in-web-components\/#Conclusiones\" >Conclusions<\/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-css-scoping-in-web-components\/#Preguntas_Frecuentes\" >Frequent questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/shadow-dom-css-scoping-in-web-components\/#%C2%BFQue_son_los_Web_Components\" >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-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/shadow-dom-css-scoping-in-web-components\/#%C2%BFQue_es_el_scoping_de_CSS_en_Shadow_DOM\" >What is CSS scoping in Shadow DOM?<\/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-css-scoping-in-web-components\/#%C2%BFComo_se_utiliza_el_Shadow_DOM_en_JavaScript_en_espanol\" >How is the Shadow DOM used in JavaScript in Spanish?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_Shadow_DOM\"><\/span>What is Shadow DOM?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The Shadow DOM is a fundamental feature of Web Components that allows the encapsulation of the style and structure of a custom component. With Shadow DOM, a component&#039;s internal DOM tree is isolated from the document&#039;s main DOM tree, preventing the component&#039;s styles and interactions from affecting other elements on the page.<\/p>\n<p>One of the main advantages of the Shadow DOM is the <strong>CSS scoping<\/strong>. This means that styles defined within a custom component are only applied to the elements contained in that component and are not filtered out. This avoids style conflicts and allows components to be completely independent of each other.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Utilizando_CSS_Scoping_en_Shadow_DOM\"><\/span>Using CSS Scoping in Shadow DOM<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To apply CSS to a Web Component, you use the Shadow DOM along with the element <code>&lt;style&gt;<\/code>. The Shadow DOM includes a <em>shadowed DOM hive<\/em> which can be used to encapsulate component styles. Inside of the <code>&lt;style&gt;<\/code>, you can define CSS selectors and rules that will apply only to elements within the Shadow DOM.<\/p>\n<p>For example, if we have a custom button component, we can define the styles within the Shadow DOM as follows:<\/p>\n<pre>\nbutton {\n      background-color: blue;\n      color: white;\n      border: none;\n      padding: 10px 20px;\n      border-radius: 5px;\n    }\n  <button>click<\/button>\n<\/pre>\n<p>In this example, the styles defined within the Shadow DOM will only be applied to the button element within the component. Styles will not affect any other elements on the page, even if they have the same class name or tag.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Javascript_en_espanol_para_trabajar_con_Shadow_DOM\"><\/span>Javascript in Spanish to work with Shadow DOM<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To manipulate the Shadow DOM from JavaScript, there are specific methods and properties that we can use. Below are some examples of how to work with Shadow DOM using JavaScript in Spanish:<\/p>\n<p><code>getElementById<\/code>: Method to access an element within the Shadow DOM by its unique ID.<\/p>\n<p><code>querySelector<\/code>: Method to select an element within the Shadow DOM using CSS selectors.<\/p>\n<p><code>attachShadow<\/code>: Method to create a Shadow DOM and attach it to an existing HTML element.<\/p>\n<p>These are just a few of the methods available for working with Shadow DOM in JavaScript. With these tools, we can manipulate and access elements within the Shadow DOM in a safe and controlled way.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusiones\"><\/span>Conclusions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The Shadow DOM is a powerful feature of Web Components that allows us to encapsulate the style and structure of our custom components. With CSS scoping in Shadow DOM, we can avoid style conflicts and create independent and reusable components.<\/p>\n<p>If you are interested in learning more about Web Components, CSS Scoping and JavaScript in Spanish, I invite you to visit my blog at <a href=\"https:\/\/nelkodev.com\/en\/\">nelkodev.com<\/a>. On my site, you&#039;ll find more educational content and practical examples to help you improve your web development skills.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_Frecuentes\"><\/span>Frequent questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFQue_son_los_Web_Components\"><\/span>What are Web Components?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Web Components are a technology that allows us to create custom components in HTML, CSS and JavaScript. These components encapsulate its functionality and style, making it easy to reuse in different projects.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_el_scoping_de_CSS_en_Shadow_DOM\"><\/span>What is CSS scoping in Shadow DOM?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>CSS Scoping in Shadow DOM is the ability to define styles that will be applied only to elements contained within a custom component. This avoids style conflicts with other elements on the page.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo_se_utiliza_el_Shadow_DOM_en_JavaScript_en_espanol\"><\/span>How is the Shadow DOM used in JavaScript in Spanish?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The Shadow DOM is used in Spanish JavaScript through the use of specific methods and properties, such as <code>getElementById<\/code>, <code>querySelector<\/code> y <code>attachShadow<\/code>. These methods allow you to access and manipulate elements within the Shadow DOM.<\/p>","protected":false},"excerpt":{"rendered":"<p>In the world of web development, creating reusable and modular components is essential to building robust and scalable applications. Web Components are a technology that allows us to encapsulate HTML, CSS, and JavaScript into custom elements, making them easier to reuse and promoting better code organization. What is Shadow DOM? The Shadow DOM is a web component that is used to create web components that are [\u2026]<\/p>","protected":false},"author":1,"featured_media":23433,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1127],"tags":[205,886,519,743,1100,722,47,742],"class_list":["post-23432","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-webcomponents","tag-blog","tag-components","tag-css","tag-dom","tag-scoping","tag-shadow","tag-web","tag-webcomponents"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23432","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=23432"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23432\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/23433"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=23432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=23432"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=23432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}