diff --git a/content/roadmaps/100-frontend/content/113-web-components/102-shadow-dom.md b/content/roadmaps/100-frontend/content/113-web-components/102-shadow-dom.md
index 913240cdd..ea2895696 100644
--- a/content/roadmaps/100-frontend/content/113-web-components/102-shadow-dom.md
+++ b/content/roadmaps/100-frontend/content/113-web-components/102-shadow-dom.md
@@ -1 +1,6 @@
-# Shadow dom
\ No newline at end of file
+# Shadow DOM
+
+An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM'>Using shadow DOM | MDN web docs</BadgeLink>