resolve multiple <slot> elements rendering on the home page (#454)

* initial WIP to resolve the issue * example code cleanup * supplemental documentation for Shadow DOM and slot usage * restore card padding * fix padding, revert slot to direct decendent of host * remove extra dependency * home page card style tweaks Co-authored-by: aholtzman <[email protected]>
ProjectEvergreen · Jan 23, 2021 · 4972552 · 4972552
1 parent 062e56c
commit 4972552
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 106 deletions.
diff --git a/www/components/card/card.css b/www/components/card/card.css
@@ -1,54 +1,15 @@
 :host {
-
-  & .card {
-    padding: 2.5rem;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-    word-wrap: break-word;
-    background-color: #fff;
-    background-clip: initial;
-    text-align: center;
-
-    @media(max-width:768px) {
-      padding:0;
-    }
-
-    & .body {
-      padding:10px;
-    }
-  }
-
-
-  & .card-xs {
-    margin: 0.25rem;
-    flex: 1 1 16.666%;
-    max-width: 250px;
-
-    @media (max-width: 1024px) {
-      max-width: 100%;
-    }
-  }
-  & .card-sm {
-    margin: 0.25rem;
-    flex: 1 1 25%;
-    max-width: 380px;
-
-    @media (max-width: 1024px) {
-      max-width: 100%;
-    }
-  }
-  & .card-md {
-    margin: 0.25rem;
-    flex: 1 1 33.333%;
-    max-width: 450px;
-
-    @media (max-width: 1024px) {
-      max-width: 100%;
-    }
-  }
-  & .card-full {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: initial;
+  text-align: center;
+
+  & slot {
+    padding: 10px;
     margin: 0.25rem;
     flex: 1 1 33.333%;
   }
@@ -57,9 +18,10 @@
     background-size: cover;
     background-position-x: center;
     background-position-y: center;
+
     & img {
       width: 100%;
       max-width: 200px;
     }
   }
-}
+}
diff --git a/www/components/card/card.js b/www/components/card/card.js
@@ -43,18 +43,11 @@ class Card extends LitElement {
 
   render() {
     return html`
-    <style>
-      ${css}
-    </style>
-      <div class="card ${this.size ? `card-${this.size}` : ''}">
-        ${this.renderImage()}
-        ${this.renderTitle()}
-        <div class="body">
-          <slot></slot>
-        </div>
-      </div>
+      ${this.renderImage()}
+      ${this.renderTitle()}
+      <slot name="cardcontent"></slot>
     `;
   }
 }
 
-customElements.define('app-card', Card);
+customElements.define('app-card', Card);
diff --git a/www/components/row/row.js b/www/components/row/row.js
diff --git a/www/package.json b/www/package.json
@@ -10,7 +10,6 @@
     "@evergreen-wc/eve-button": "^0.0.9",
     "@evergreen-wc/eve-container": "^0.0.10",
     "lit-element": "^2.4.0",
-    "lit-html": "^1.3.0",
     "prismjs": "^1.21.0"
   },
   "devDependencies": {

diff --git a/www/pages/docs/component-model.md b/www/pages/docs/component-model.md
@@ -114,4 +114,19 @@ customElements.define('x-greeting', GreetingComponent);
 
 ## References
 - [MDN Developer Docs: Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
-- [Google Developer Docs: Web Components](https://developers.google.com/web/fundamentals/web-components/)
+- [Google Developer Docs: Web Components](https://developers.google.com/web/fundamentals/web-components/)
+
+
+> Some notes / recommendations about ShadowDOM from [our research](https://github.com/ProjectEvergreen/greenwood/pull/454)
+> - [`<slot>` should be named](https://github.com/Polymer/lit-element/issues/824#issuecomment-535574662)
+> - `<slot>` only supports a [shallow (one) level of nesting](https://javascript.info/slots-composition).  A `<slot>` tag must be within a direct descendant of its `:host`.
+> ```html
+> <h3>Content from inside the custom element. (inside HTMLElement)</h3>
+> <h3>
+>    <slot name="content"></slot> <!-- will show -->
+> <h3>
+> <div>
+>   <h3>
+>      <slot name="content"></slot> <!-- wont show -->
+>    <h3>
+> </div>
diff --git a/www/pages/index.html b/www/pages/index.html
@@ -4,10 +4,9 @@
   <head>
     <!-- TODO have to use forward slash / for path references?  translate on the fly in serve.js? -->
     <script type="module" src="../components/banner/banner.js"></script>
-    
+
     <!-- TODO these came from front matter, return to frontmatter? -->
     <script type="module" src="../components/card/card.js"></script>
-    <script type="module" src="../components/row/row.js"></script>
 
     <!-- TODO had to handle relative path by using / , should be transparent to the user -->
     <link rel="stylesheet" href="/styles/home.css"></link>
@@ -16,33 +15,33 @@
   <body>
 
     <div class="gwd-content-outlet">
+
       <app-banner></app-banner>
-      
+
       <div class='gwd-content-wrapper'>
         <eve-container fluid>
-          
+
           <div class='gwd-page-template gwd-content'>
             <div class="message">
               <h2>Greenwood is a modern and performant static site generator for Web Component based development.</h2>
-            
+
               <p>Greenwood is focused on providing an intuitive and accessible development workflow supporting modern JavaScript and CSS features like Web Components, FlexBox, CSS Grid, and Modules.  Greenwood strives to deliver not only great user experiences, but also great developer experiences.  To learn more about the project we encourage everyone to first go through our <a href="/getting-started/">Getting Started</a> guide.  You can learn more about the project itself at our <a href="/about">about page</a> or see our <a href="/docs/">documentation</a> to learn more about how to use Greenwood.</p>
               <hr/>
             </div>
-            
+
             <div class="cards">
-              <app-row>
-                <app-card title="webpack" img="../assets/webpack.svg" size="full" style="width:100%">
-                  To us, webpack is more than a module bundler, it's an entire development ecosystem!  We use webpack
-                  under the hood to power the development workflow and to help generate a performant site for you with the power of tools like Babel and PostCSS.  The best part?  You don't have to know anything about that!  Greenwood handles all the configuration and optimizations for you, so you can be sure that your users will get the best experience possible, and as a developer, so will you.
-                </app-card>
-                <app-card title="Web Components" img="../assets/webcomponents.svg" size="full" style="width:100%">
-                  Do we love Web Components?  You bet we do!  In fact, it's one of many things we love about the modern web, including other features like Modules, FlexBox and CSS Grid, Fetch API, and more!  It's all there for you in the browser, and with Greenwood, we make sure all those features will work for all your users.  Sit back and write the modern code you want and Greenwood will take care of the rest.
-                </app-card>
-                <app-card title="NodeJS" img="../assets/nodejs.png" size="full" style="width:100%">
-                  Although Greenwood generates a static site that you can host just about anywhere (Netlify, S3, Apache, etc), for developing and building your site Greenwood requires NodeJS to be available on the command line.  This allows us to tap into all the amazing web development tools and libraries available on npm and also means you can use those packages too when developing your own site!  Greenwood will aim to support the latest LTS release of NodeJS and the version of npm that comes with.
-                </app-card>
-              </app-row>
-            </div>    
+              <app-card title="webpack" img="../assets/webpack.svg" style="width:100%;padding:1.5rem;">
+                <p slot="cardcontent">To us, webpack is more than a module bundler, it's an entire development ecosystem!  We use webpack under the hood to power the development workflow and to help generate a performant site for you with the power of tools like Babel and PostCSS.  The best part?  You don't have to know anything about that!  Greenwood handles all the configuration and optimizations for you, so you can be sure that your users will get the best experience possible, and as a developer, so will you.</p>
+              </app-card>
+
+              <app-card title="Web Components" img="../assets/webcomponents.svg" style="width:100%;padding:1.5rem;">
+                <p slot="cardcontent">Do we love Web Components?  You bet we do!  In fact, it's one of many things we love about the modern web, including other features like Modules, FlexBox and CSS Grid, Fetch API, and more!  It's all there for you in the browser, and with Greenwood, we make sure all those features will work for all your users.  Sit back and write the modern code you want and Greenwood will take care of the rest.</p>
+              </app-card>
+
+              <app-card title="NodeJS" img="../assets/nodejs.png" style="width:100%;padding:1.5rem;">
+                <p slot="cardcontent">Although Greenwood generates a static site that you can host just about anywhere (Netlify, S3, Apache, etc), for developing and building your site Greenwood requires NodeJS to be available on the command line.  This allows us to tap into all the amazing web development tools and libraries available on npm and also means you can use those packages too when developing your own site!  Greenwood will aim to support the latest LTS release of NodeJS and the version of npm that comes with.</p>
+              </app-card>
+            </div>
 
           </div>
 
@@ -53,4 +52,4 @@ <h2>Greenwood is a modern and performant static site generator for Web Component
 
   </body>
 
-</html>
+</html>
diff --git a/www/styles/home.css b/www/styles/home.css
@@ -8,8 +8,8 @@ h3 {
   margin-top: 20px;
   min-height: 300px;
   background-color: #efefef;
-  padding: 0 15%;
   font-size:1.2rem;
+  width: 85%;
 
   & h3 {
     font-size:2rem;
@@ -22,12 +22,14 @@ h3 {
 }
 
 .cards {
-  margin: 0 -15%
+  margin: 0 -15%;
 }
 
 .message {
   padding: 4rem;
   text-align:center;
+  margin: 0 auto;
+  width: 80%;
 
   & hr {
     margin-top: 4rem;
@@ -36,4 +38,16 @@ h3 {
   @media(max-width:768px) {
     padding:0;
   }
+}
+
+.cards {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+  }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -4994,7 +4994,7 @@ lit-element@^2.0.1, lit-element@^2.4.0:
   dependencies:
     lit-html "^1.1.1"
 
-lit-html@^1.1.1, lit-html@^1.3.0:
+lit-html@^1.1.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.3.0.tgz#c80f3cc5793a6dea6c07172be90a70ab20e56034"
   integrity sha512-0Q1bwmaFH9O14vycPHw8C/IeHMk/uSDldVLIefu/kfbTBGIc44KGH6A8p1bDfxUfHdc8q6Ct7kQklWoHgr4t1Q==