From 30a1bcc4a566c94d75753e313e2193d57a1ee14e Mon Sep 17 00:00:00 2001
From: Praveen Puglia <praveenpuglia@gmail.com>
Date: Wed, 14 Mar 2018 20:46:53 +0530
Subject: [PATCH] shadow dom example 1

---
 examples/01-creating-shadow-dom.html | 49 ++++++++++++++++++++++++++++
 examples/styles.css                  | 24 ++++++++++++++
 2 files changed, 73 insertions(+)
 create mode 100644 examples/01-creating-shadow-dom.html
 create mode 100644 examples/styles.css
diff --git a/examples/01-creating-shadow-dom.html b/examples/01-creating-shadow-dom.html
new file mode 100644
index 0000000..75401dc
--- /dev/null
+++ b/examples/01-creating-shadow-dom.html
@@ -0,0 +1,49 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible"
+          content="ie=edge">
+    <link rel="stylesheet"
+          href="styles.css">
+    <title>01 - Creating Shadow Dom</title>
+</head>
+
+<body>
+    <h1>Open DevTools 🔨</h1>
+    <h2>Check the code for instructions</h2>
+
+
+    <!-- The element to which we'll attach the Shadow DOM -->
+    <div class="element"></div>
+
+    <script>
+        // First! Uncomment this!
+        init();
+
+        function init() {
+            // The element
+            let el = document.querySelector('.element');
+
+            // Attaching Shadow DOM to the element
+            el.attachShadow({ mode: 'open' });
+
+            // At this point, open Devtools, inspect the element
+            // and expand the element.
+
+            // You'll see the shadow root as in Elements panel as... 
+            // <div class="element">
+            //   #shadow-root (open)
+            // </div>
+
+            // Now, head over to the console.
+            console.log("Hello! I am the Element - `el` :", el);
+            console.log("Hello! I am the Shadow Root - `el.shadowRoot` :", el.shadowRoot);
+            console.log("Hello! I am the Element, again! - `el.shadowRoot.host` :", el.shadowRoot.host);
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/styles.css b/examples/styles.css
new file mode 100644
index 0000000..a24321a
--- /dev/null
+++ b/examples/styles.css
@@ -0,0 +1,24 @@
+/*=============================================
+=            Reset            =
+=============================================*/
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+/*=====  End of Reset  ======*/
+
+/*=============================================
+=            Layout            =
+=============================================*/
+
+body {
+  max-width: 1200px;
+  margin: auto;
+}
+
+/*=====  End of Layout  ======*/
