--- title: Pros and cons of using Shadow DOM and style encapsulation description: A detailed exploration of the trade-offs of using Shadow DOM and style encapsulation in web components, written from an accessibility-first perspective. The... canonical: https://daily.dev/posts/pros-and-cons-of-using-shadow-dom-and-style-encapsulation-dpljzfgnh twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Pros and cons of using Shadow DOM and style encapsulation | daily.dev og:description: A detailed exploration of the trade-offs of using Shadow DOM and style encapsulation in web components, written from an accessibility-first perspective. The... og:url: https://daily.dev/posts/pros-and-cons-of-using-shadow-dom-and-style-encapsulation-dpljzfgnh og:image: https://api.daily.dev/og/posts/dpLJzfgnH.png og:image:alt: Pros and cons of using Shadow DOM and style encapsulation og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Pros and cons of using Shadow DOM and style encapsulation **[Manuel Matuzović](https://daily.dev/sources/matuzo)** · 13 min read · 0 upvotes · 0 comments ## Summary A detailed exploration of the trade-offs of using Shadow DOM and style encapsulation in web components, written from an accessibility-first perspective. The author covers 3 pros (style encapsulation, DOM encapsulation, named slots) and 11 cons including: the leaky nature of CSS inheritance and custom properties, limitations of the ::slotted() pseudo-element, broken cross-root ARIA and anchor references, JavaScript dependency for rendering, FOUCE (Flash of Unstyled Custom Element), form elements not being associated with parent forms, inability to apply global styles like focus indicators, and poor support in accessibility testing tools and DevTools. The author concludes that Shadow DOM has valid use cases (e.g., design systems distributed across frameworks) but should not be the default choice for every web component. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: --- Tags: [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html), [#accessibility](https://daily.dev/tags/accessibility), [#web-components](https://daily.dev/tags/web-components) [View this post on daily.dev](https://daily.dev/posts/pros-and-cons-of-using-shadow-dom-and-style-encapsulation-dpljzfgnh) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Pros and cons of using Shadow DOM and style encapsulation","url":"https://daily.dev/posts/pros-and-cons-of-using-shadow-dom-and-style-encapsulation-dpljzfgnh","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/pros-and-cons-of-using-shadow-dom-and-style-encapsulation-dpljzfgnh"},"datePublished":"2026-06-22T14:41:56.784Z","dateModified":"2026-06-22T14:42:30.086Z","description":"A detailed exploration of the trade-offs of using Shadow DOM and style encapsulation in web components, written from an accessibility-first perspective. The...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/d791f7c70a2810b4eeb9438891e125b3?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/d791f7c70a2810b4eeb9438891e125b3?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Manuel Matuzović","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Manuel Matuzović","logo":"https://media.daily.dev/image/upload/s--EstFG5yE--/f_auto,q_auto/v1782139307/logos/matuzo","url":"https://daily.dev/sources/matuzo"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/pros-and-cons-of-using-shadow-dom-and-style-encapsulation-dpljzfgnh","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css,html,accessibility,web-components","timeRequired":"PT13M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Manuel Matuzović","item":"https://daily.dev/sources/matuzo"},{"@type":"ListItem","position":3,"name":"Pros and cons of using Shadow DOM and style encapsulation"}]} ```