refining second example

praveenpuglia · Mar 14, 2018 · d234aa9 · d234aa9
1 parent a94ecca
commit d234aa9
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/examples/02-putting-content-into-shadow-dom.html b/examples/02-putting-content-into-shadow-dom.html
@@ -8,7 +8,7 @@
           content="ie=edge">
     <link rel="stylesheet"
           href="styles.css">
-    <title>01 - Creating Shadow Dom</title>
+    <title>02 - Putting Content Into Shadow DOM</title>
 </head>
 
 <body>
@@ -18,14 +18,19 @@ <h2>Check the code for instructions</h2>
 
     <!-- The element to which we'll attach the Shadow DOM -->
     <div class="element">
-        Hello World!
+        <h1>Hello World!</h1>
     </div>
 
     <script>
         // When init() is commented, you'll see the .element div with 'Hello World!'
         // But once you run init, it attaches Shadow DOM to .element and only stuff
         // from within the shadow is rendered on page.
-        // init();
+        init();
+
+        // You'll also see that the <h1> inside shdow DOM has the margins
+        // but the Hello World! <h1> didn't have it. 👀
+
+        // We are going to later see how styles work in the shadows.
 
         function init() {
             // The element

diff --git a/examples/styles.css b/examples/styles.css
@@ -22,3 +22,17 @@ body {
 }
 
 /*=====  End of Layout  ======*/
+
+
+ /*=============================================
+ =            Example Specific Styles            =
+ =============================================*/
+
+ .element {
+   padding: 1rem;
+   border: 1px dashed;
+ }
+
+ /*=====  End of Example Specific Styles  ======*/
+
+