instances of <slot>-ed content and lit-element are rendering twice

[thescientist13]

Type of Change

• New Feature Request
• Documentation / Website
• Improvement / Suggestion
• Bug
• Other (please clarify below)

Summary

Coming out of #417 (comment), On the home page, the logos are and titles are being rendered twice. but it's the non slotted content?

Details

Spent a little time looking at the double rendering of <eve-card> and I think this may be related to LitElement.

The serialized output is pretty much the same but it looks like in this branch, the content that should be in the Shadow DOM is duplicated in the Light DOM, where on the current site only the static content is in the light DOM.

Prod

  <eve-row class="style-scope wc-md-53f9cab0ead9d09 eve-53f9cab0ead9d09"><!---->
    
      
    <eve-card title="webpack" img="/assets/webpack.svg" size="full" style="width:100%" class="style-scope wc-md-53f9cab0ead9d09 eve-53f9cab0ead9d09"><!---->
    
      <div class="card card-full style-scope eve-card">
        
        <div class="card-img-top style-scope eve-card">
          <img class="style-scope eve-card" src="/assets/webpack.svg" alt="webpack">
        </div>
      
        
        <h3 class="style-scope eve-card"><!---->webpack<!----></h3>
      
        <div class="body style-scope eve-card">
          
      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.
    
        </div>
      </div>
    <!----></eve-card>
    <eve-card title="Web Components" img="/assets/webcomponents.svg" size="full" style="width:100%" class="style-scope wc-md-53f9cab0ead9d09 eve-53f9cab0ead9d09"><!---->
    
      <div class="card card-full style-scope eve-card">
        
        <div class="card-img-top style-scope eve-card">
          <img class="style-scope eve-card" src="/assets/webcomponents.svg" alt="Web Components">
        </div>
      
        
        <h3 class="style-scope eve-card"><!---->Web Components<!----></h3>
      
        <div class="body style-scope eve-card">
          
      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.
    
        </div>
      </div>
    <!----></eve-card>
    <eve-card title="NodeJS" img="/assets/nodejs.png" size="full" style="width:100%" class="style-scope wc-md-53f9cab0ead9d09 eve-53f9cab0ead9d09"><!---->
    
      <div class="card card-full style-scope eve-card">
        
        <div class="card-img-top style-scope eve-card">
          <img class="style-scope eve-card" src="/assets/nodejs.png" alt="NodeJS">
        </div>
      
        
        <h3 class="style-scope eve-card"><!---->NodeJS<!----></h3>
      
        <div class="body style-scope eve-card">
          
      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.
    
        </div>
      </div>
    <!----></eve-card>
  
    <!----></eve-row>

Now

<app-row><!---->
      
                  <app-card title="webpack" img="../assets/webpack.svg" size="full" style="width:100%"><!---->
    
      <div class="card card-full style-scope app-card">
        
        <div class="card-img-top style-scope app-card">
          <img class="style-scope app-card" src="../assets/webpack.svg" alt="webpack">
        </div>
      
        
        <h3 class="style-scope app-card"><!---->webpack<!----></h3>
      
        <div class="body style-scope app-card">
          
                    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.
                  
        </div>
      </div>
    <!----></app-card>
                  <app-card title="Web Components" img="../assets/webcomponents.svg" size="full" style="width:100%"><!---->
    
      <div class="card card-full style-scope app-card">
        
        <div class="card-img-top style-scope app-card">
          <img class="style-scope app-card" src="../assets/webcomponents.svg" alt="Web Components">
        </div>
      
        
        <h3 class="style-scope app-card"><!---->Web Components<!----></h3>
      
        <div class="body style-scope app-card">
          
                    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.
                  
        </div>
      </div>
    <!----></app-card>
                  <app-card title="NodeJS" img="../assets/nodejs.png" size="full" style="width:100%"><!---->
    
      <div class="card card-full style-scope app-card">
        
        <div class="card-img-top style-scope app-card">
          <img class="style-scope app-card" src="../assets/nodejs.png" alt="NodeJS">
        </div>
      
        
        <h3 class="style-scope app-card"><!---->NodeJS<!----></h3>
      
        <div class="body style-scope app-card">
          
                    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.
                  
        </div>
      </div>
    <!----></app-card>
                
    <!----></app-row>

---

Has to do with something regarding Shadow DOM and possibly nested <slot> possibly and If I comment out the <script> tag for card.js in the serialized index.html, there is no issues, so seems JavaScript / lit related.

Couple things to look into

• same version of lit-element
• downgrade version puppeteer
• try just using HTMLElement
• try with unserialized index.html contents

[thescientist13]

Wonder if body[unresolved] is still an issue?

[hutchgrant]

By commenting out htmlModified = htmlModified.replace(/<script type="module-shim"/g, '<script type="module"'); in lifecycles/serialize.js I was able to get it to render(with a typical http-server) and not double render the component. Granted now some media queries and other css are broken.

[thescientist13]

interesting... son yeah, that does seem to reenforce the idea that if the JavaScript is disabled (e.g. lit-element is not loaded things work O juste through serialization alone. Not sure what the tells us specifically, but another interesting data point none the less. 🤔

[thescientist13]

Saw this was happening in my personal website project as well.
thegreenhouseio/www.thegreenhouse.io#182

But after applying the notes in #454 , I can confirm it is fixed there too, no need for an upgrade, it can all be done from in the code!