shadow dom example 1

praveenpuglia · Mar 14, 2018 · 30a1bcc · 30a1bcc
1 parent eeade62
commit 30a1bcc
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 0 deletions.
diff --git a/examples/01-creating-shadow-dom.html 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>
diff --git a/examples/styles.css 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  ======*/