From 71e35436979d079eca0b00db008047e58a315f04 Mon Sep 17 00:00:00 2001
From: Aroyan <43630681+aroyan@users.noreply.github.com>
Date: Sat, 6 Aug 2022 15:18:35 +0800
Subject: [PATCH] feat: add shadow dom resource (#1412)

---
 .../content/113-web-components/102-shadow-dom.md           | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

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>