--- title: Virtual DOM vs Shadow DOM – What's the Difference? description: Virtual DOM and Shadow DOM serve different purposes in web development. Virtual DOM optimizes performance by minimizing DOM manipulations, while Shadow DOM... canonical: https://daily.dev/posts/virtual-dom-vs-shadow-dom-what-s-the-difference--mbzlroa6h twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Virtual DOM vs Shadow DOM – What's the Difference? | daily.dev og:description: Virtual DOM and Shadow DOM serve different purposes in web development. Virtual DOM optimizes performance by minimizing DOM manipulations, while Shadow DOM... og:url: https://daily.dev/posts/virtual-dom-vs-shadow-dom-what-s-the-difference--mbzlroa6h og:image: https://api.daily.dev/og/posts/mbzLRoA6h.png og:image:alt: Virtual DOM vs Shadow DOM – What's the Difference? 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. # Virtual DOM vs Shadow DOM – What's the Difference? **[freeCodeCamp](https://daily.dev/sources/freecodecamp)** · 4 min read · 56 upvotes · 6 comments ## Summary Virtual DOM and Shadow DOM serve different purposes in web development. Virtual DOM optimizes performance by minimizing DOM manipulations, while Shadow DOM encapsulates the style and behavior of web components. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@praetoriani** · 2 upvotes > A simple alternative to the Virtual DOM is the following method: > > document.implementation.createHTMLDocument(title). > > Basically, this would create a document within the current document (comparable to workbooks in Excel). Within this new document, you can easily build a new page in the background and then render it in the actual DOM in one step. In my opinion, this is much easier than a virtual DOM. And most importantly: A document created with "document.implementation.createHTMLDocument(title)" is not visible and is therefore perfect for generating new content in the background without the... **@elad\_b\_a** · 0 upvotes > Is a realy good article thanks ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#react](https://daily.dev/tags/react), [#html](https://daily.dev/tags/html), [#dom](https://daily.dev/tags/dom), [#web-components](https://daily.dev/tags/web-components) [View this post on daily.dev](https://daily.dev/posts/virtual-dom-vs-shadow-dom-what-s-the-difference--mbzlroa6h) ```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":"Virtual DOM vs Shadow DOM – What's the Difference?","url":"https://daily.dev/posts/virtual-dom-vs-shadow-dom-what-s-the-difference--mbzlroa6h","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/virtual-dom-vs-shadow-dom-what-s-the-difference--mbzlroa6h"},"datePublished":"2024-03-18T10:17:59.255Z","dateModified":"2024-05-09T08:29:02.242Z","description":"Virtual DOM and Shadow DOM serve different purposes in web development. Virtual DOM optimizes performance by minimizing DOM manipulations, while Shadow DOM...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/d52b83ec67ea495dc55ea4f17dff2a6e?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/d52b83ec67ea495dc55ea4f17dff2a6e?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"freeCodeCamp","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":"freeCodeCamp","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp","url":"https://daily.dev/sources/freecodecamp"},"commentCount":6,"discussionUrl":"https://daily.dev/posts/virtual-dom-vs-shadow-dom-what-s-the-difference--mbzlroa6h","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":56},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":6}],"keywords":"webdev,react,html,dom,web-components","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"freeCodeCamp","item":"https://daily.dev/sources/freecodecamp"},{"@type":"ListItem","position":3,"name":"Virtual DOM vs Shadow DOM – What's the Difference?"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/virtual-dom-vs-shadow-dom-what-s-the-difference--mbzlroa6h","comment":[{"@type":"Comment","text":"A simple alternative to the Virtual DOM is the following method:\ndocument.implementation.createHTMLDocument(title).\nBasically, this would create a document within the current document (comparable to workbooks in Excel). Within this new document, you can easily build a new page in the background and then render it in the actual DOM in one step. In my opinion, this is much easier than a virtual DOM. And most importantly: A document created with “document.implementation.createHTMLDocument(title)” is not visible and is therefore perfect for generating new content in the background without the user noticing.","datePublished":"2024-03-20T07:51:47.976Z","url":"https://daily.dev/posts/mbzLRoA6h#c-zL4LUzqtJ","author":{"@type":"Person","name":"Praetoriani","url":"https://daily.dev/praetoriani","image":"https://avatars.githubusercontent.com/u/25861571?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Is a realy good article thanks","datePublished":"2024-03-20T06:29:09.548Z","url":"https://daily.dev/posts/mbzLRoA6h#c-kqmAJQ95L","author":{"@type":"Person","name":"elad ben aderet","url":"https://daily.dev/elad_b_a","image":"https://lh3.googleusercontent.com/a/ACg8ocIcT-vFNPoYnLBvK4RJ4hxxjGpEEHSX_QQqzKlMh1PnZ9k=s96-c"}}]} ```