upgrade lit@2 #234

thescientist13 · 2021-07-29T18:24:33Z

Related Issue

ProjectEvergreen/greenwood#611 (comment)

Wanted to help do some Lit@2 upgrade testing to see if I could reproduce the above issue. From what I can tell, it comes down to the way the serialized HTML is coming out from puppeteer which, when can combined with Greenwood's static optimization settings, results in issue like above and below.

Details

Before

On production today, here is the HTML you get for. index.html.

<!DOCTYPE html><html lang="en" prefix="og:http://ogp.me/ns#">
          <script data-state="apollo">
            window.__APOLLO_STATE__ = true;
          </script>
          
                          
                          <head>
                          <link rel="preload" href="/styles/page.47891221.css" as="style" crossorigin="anonymous"></link>
                        
                          <link rel="preload" href="/styles/theme.11495703.css" as="style" crossorigin="anonymous"></link>
                        
        <!-- Shady DOM styles for app-header --><style scope="app-header">app-header .header.app-header {
  width: 100%;
}

app-header h2.app-header {
  padding: 0;
}

app-header .header.app-header a.app-header {
  text-decoration: none;
}

app-header header.app-header {
  display: none;
}

app-header .caption.app-header {
  width: 100%;     text-align: center;     color: #efefef;     background-color: #020202;     font-style: italic;     margin: 0;
}

@media (min-width: 768px) {
app-header header.app-header {
  display: block;     background-image: url('/assets/banner.jpg');     background-size: cover;     background-color: #020202;     height: 300px;
}

}</style><!-- Shady DOM styles for app-social-icon-link --><style scope="app-social-icon-link">app-social-icon-link img.app-social-icon-link {
  display: block;
        height: 60px;
        width: 60px;
        margin: 0 10px;
}</style><!-- Shady DOM styles for app-footer --><style scope="app-footer">app-footer footer.app-footer {
  width: 50%;     margin: 0 auto;     text-align: center;
}

app-footer ul.app-footer {
  list-style: none;     padding: 0;     margin-top: 10px;
}

app-footer li.app-footer {
  display: inline-block;
}

app-footer .copyright.app-footer {
  display: inline-block;     margin: 10px auto;
}</style><!-- Shady DOM styles for app-navigation --><style scope="app-navigation">app-navigation .navigation.app-navigation {
  display: block;     width: 40%;     margin: 25px auto;     text-align: center;
}

app-navigation .navigation.app-navigation ul.app-navigation {
  list-style: none;     margin: 0 auto;     width: 80%;     padding: 0;
}

app-navigation .navigation.app-navigation li.app-navigation {
  display: inline-block;     width: 100px;
}

app-navigation .navigation.app-navigation a.app-navigation {
  color: #020202;     font-size: 1.5em;
}</style><style>body {transition: opacity ease-in 0.2s; } 
body[unresolved] {opacity: 0; display: block; overflow: hidden; position: relative; } 
</style>
            
            
        <title>The Greenhouse I/O</title>
        
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="description" content="Personal site and blog for Owen Buckley and The Greenhouse I/O.  Ideas are built here.">
<meta name="twitter:creator" content="@thegreenhouseio">
<meta name="twitter:site" content="@thegreenhouseio">
<meta property="og:title" content="The Greenhouse I/O">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.thegreenhouse.io">
<meta property="og:image" content="/assets/og-meta-preview.png">
<meta property="og:description" content="Personal site and blog for Owen Buckley and The Greenhouse I/O.  Ideas are built here.">
<link rel="shortcut icon" href="/assets/favicon.ico">
<link rel="icon" href="/assets/favicon.ico">
    
    
    
    

    <link rel="stylesheet" href="/styles/theme.11495703.css">
    <link rel="stylesheet" href="/styles/page.47891221.css">
    
    <style>
      .outlet {
        min-height: 50vh
      }
    </style>

          <style>
            
      h2 {
        padding-left: 17.25%;
      }
      
      p {
        width: 65%;
        margin: 20px auto;
        text-align: left;
        font-size: 20px;
      }

      p.cta {
        text-align: center;
      }

      hr {
        width: 15%;
        margin: 5px auto;
      }
    
          </style>

        
  
          <link rel="preconnect" href="https://www.google-analytics.com/">
          <script async src="https://www.googletagmanager.com/gtag/js?id=UA-117350131-1"></script>
          <script>
            var getOutboundLink = function(url) {
              gtag('event', 'click', {
                'event_category': 'outbound',
                'event_label': url,
                'transport_type': 'beacon'
              });
            }
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'UA-117350131-1', { 'anonymize_ip': true });
            gtag('config', 'UA-117350131-1');
          </script>
        </head>
        

  <body>

    <div class="layout">
      <section class="row">
        <app-header><!---->
      <div class="header style-scope app-header"> 
        <a href="/" title="Return to the the home page" class="style-scope app-header">
          <header class="style-scope app-header"></header>
          <h2 class="caption style-scope app-header">A DREAMER BY DESIGN</h2>
        </a>
      </div>
    <!----></app-header>
      </section>
      
      <section class="row">
        <app-navigation><!---->
      <div class="navigation style-scope app-navigation">
        <nav class="style-scope app-navigation">
          <ul class="style-scope app-navigation">
            <li class="style-scope app-navigation"><a href="/about/" class="style-scope app-navigation">About</a></li>
            <li class="style-scope app-navigation"><a href="/projects/" class="style-scope app-navigation">Projects</a></li>
            <li class="style-scope app-navigation"><a href="/blog/" class="style-scope app-navigation">Blog</a></li>
          </ul>
        </nav>
      </div>
    <!----></app-navigation>
      </section>

      <section class="outlet row">  
        
    <div>
      <h2>Hello, I'm <strong>Owen Buckley</strong>! 👋</h2>
<p>I find myself most passionate about helping people learn more about technology and how to improve their process and workflows.  I like to do so through software projects that are well designed, tested, performant, and maintained in a way that advocates for both user <em>and</em> developer experiences.  My broad range of technical knowledge and capabilities, creativity, interpersonal skills, and a good splash of entrepreneurial spirit make me a valuable contributor to any project.</p>
<p><strong>The Greenhouse</strong> is a personal business of my own with the goal of helping local entrepreneurs and small businesses plan out their ideas and strategies while helping make technology their new competitive advantage.  Be it small business consultation, advice on creating a blog or content based website, coding help or mentorship, presentation or speaking opportunities, business or product development, and everything in between, I am there and ready to answer questions and help solve any technical problems or questions you have!</p>
<p>I'm always up to something online be it on <a href="https://twitter.com/thegreenhouseio">twitter</a> <a href="https://medium.com/@thegreenhouseio">Medium</a>, or around the local <a href="https://www.pvdgeeks.org">Rhode Island Tech Meetup Community</a>, so I hope to hear from you!</p>
<p class="cta"><i>Let's build something great!</i></p>
<hr>
    </div>
  
      </section>

      <section class="row">
        <app-footer><!---->
      <footer class="style-scope app-footer">
        <ul class="style-scope app-footer">
          <li class="style-scope app-footer">
            <app-social-icon-link name="linkedin" class="style-scope app-footer"><!---->
      <a rel="noopener" target="_blank" class="style-scope app-social-icon-link" href="https://www.linkedin.com/in/owen-buckley-91393447/" click="getOutboundLink('https://www.linkedin.com/in/owen-buckley-91393447/');">
        <img class="style-scope app-social-icon-link" src="/assets/logos/linkedin.svg" alt="linkedin logo">
      </a>
    <!----></app-social-icon-link>
          </li>

          <li class="style-scope app-footer">
            <app-social-icon-link name="twitter" class="style-scope app-footer"><!---->
      <a rel="noopener" target="_blank" class="style-scope app-social-icon-link" href="https://twitter.com/thegreenhouseio" click="getOutboundLink('https://twitter.com/thegreenhouseio');">
        <img class="style-scope app-social-icon-link" src="/assets/logos/twitter.svg" alt="twitter logo">
      </a>
    <!----></app-social-icon-link>
          </li>

          <li class="style-scope app-footer">
            <app-social-icon-link name="medium" class="style-scope app-footer"><!---->
      <a rel="noopener" target="_blank" class="style-scope app-social-icon-link" href="https://medium.com/@thegreenhouseio" click="getOutboundLink('https://medium.com/@thegreenhouseio');">
        <img class="style-scope app-social-icon-link" src="/assets/logos/medium.svg" alt="medium logo">
      </a>
    <!----></app-social-icon-link>
          </li>

          <li class="style-scope app-footer">
            <app-social-icon-link name="github" class="style-scope app-footer"><!---->
      <a rel="noopener" target="_blank" class="style-scope app-social-icon-link" href="https://github.com/thescientist13" click="getOutboundLink('https://github.com/thescientist13');">
        <img class="style-scope app-social-icon-link" src="/assets/logos/github.svg" alt="github logo">
      </a>
    <!----></app-social-icon-link>
          </li>
        </ul>
        
        <span class="copyright style-scope app-footer">© Owen Buckley / thegreenhouse.io</span>
      </footer>
    <!----></app-footer>
      </section>
    </div>

  

</body></html>

After

In this PR, this is what you get now (notice the absence of pre-rendered <style> tags in the <head>)

<!DOCTYPE html><html lang="en" prefix="og:http://ogp.me/ns#">
          <script data-state="apollo">
            window.__APOLLO_STATE__ = true;
          </script>
          
                          
                          <head>
                          <link rel="preload" href="/styles/page.47891221.css" as="style" crossorigin="anonymous"></link>
                        
                          <link rel="preload" href="/styles/theme.11495703.css" as="style" crossorigin="anonymous"></link>
                        
        <!-- Shady DOM styles for app-header --><!-- Shady DOM styles for app-social-icon-link --><!-- Shady DOM styles for app-footer --><!-- Shady DOM styles for app-navigation --><style>body {transition: opacity ease-in 0.2s; } 
body[unresolved] {opacity: 0; display: block; overflow: hidden; position: relative; } 
</style>
            
            
        <title>The Greenhouse I/O</title>
        
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="description" content="Personal site and blog for Owen Buckley and The Greenhouse I/O.  Ideas are built here.">
<meta name="twitter:creator" content="@thegreenhouseio">
<meta name="twitter:site" content="@thegreenhouseio">
<meta property="og:title" content="The Greenhouse I/O">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.thegreenhouse.io">
<meta property="og:image" content="/assets/og-meta-preview.png">
<meta property="og:description" content="Personal site and blog for Owen Buckley and The Greenhouse I/O.  Ideas are built here.">
<link rel="shortcut icon" href="/assets/favicon.ico">
<link rel="icon" href="/assets/favicon.ico">
    
    
    
    

    <link rel="stylesheet" href="/styles/theme.11495703.css">
    <link rel="stylesheet" href="/styles/page.47891221.css">
    
    <style>
      .outlet {
        min-height: 50vh
      }
    </style>

          <style>
            
      h2 {
        padding-left: 17.25%;
      }
      
      p {
        width: 65%;
        margin: 20px auto;
        text-align: left;
        font-size: 20px;
      }

      p.cta {
        text-align: center;
      }

      hr {
        width: 15%;
        margin: 5px auto;
      }
    
          </style>

        
  
          <link rel="preconnect" href="https://www.google-analytics.com/">
          <script async src="https://www.googletagmanager.com/gtag/js?id=UA-117350131-1"></script>
          <script>
            var getOutboundLink = function(url) {
              gtag('event', 'click', {
                'event_category': 'outbound',
                'event_label': url,
                'transport_type': 'beacon'
              });
            }
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'UA-117350131-1', { 'anonymize_ip': true });
            gtag('config', 'UA-117350131-1');
          </script>
        </head>
        

  <body>

    <div class="layout">
      <section class="row">
        <app-header><!---->
      <div class="header style-scope app-header"> 
        <a href="/" title="Return to the the home page" class="style-scope app-header">
          <header class="style-scope app-header"></header>
          <h2 class="caption style-scope app-header">A DREAMER BY DESIGN</h2>
        </a>
      </div>
    <style class="style-scope app-header">
      :host .header {     width: 100%;   }   :host h2 {     padding: 0;   }   :host .header a {     text-decoration: none;   }   :host header {     display: none;   }   :host .caption {     width: 100%;     text-align: center;     color: #efefef;     background-color: #020202;     font-style: italic;     margin: 0;   }  @media (min-width: 768px) {   :host header {     display: block;     background-image: url('/assets/banner.jpg');     background-size: cover;     background-color: #020202;     height: 300px;   } }
    </style></app-header>
      </section>
      
      <section class="row">
        <app-navigation><!---->
      <div class="navigation style-scope app-navigation">
        <nav class="style-scope app-navigation">
          <ul class="style-scope app-navigation">
            <li class="style-scope app-navigation"><a href="/about/" class="style-scope app-navigation">About</a></li>
            <li class="style-scope app-navigation"><a href="/projects/" class="style-scope app-navigation">Projects</a></li>
            <li class="style-scope app-navigation"><a href="/blog/" class="style-scope app-navigation">Blog</a></li>
          </ul>
        </nav>
      </div>
    <style class="style-scope app-navigation">
      :host .navigation {     display: block;     width: 40%;     margin: 25px auto;     text-align: center;   }   :host .navigation ul {     list-style: none;     margin: 0 auto;     width: 80%;     padding: 0;   }   :host .navigation li {     display: inline-block;     width: 100px;   }   :host .navigation a {     color: #020202;     font-size: 1.5em;   }
    </style></app-navigation>
      </section>

      <section class="outlet row">  
        
    <div>
      <h2>Hello, I'm <strong>Owen Buckley</strong>! 👋</h2>
<p>I find myself most passionate about helping people learn more about technology and how to improve their process and workflows.  I like to do so through software projects that are well designed, tested, performant, and maintained in a way that advocates for both user <em>and</em> developer experiences.  My broad range of technical knowledge and capabilities, creativity, interpersonal skills, and a good splash of entrepreneurial spirit make me a valuable contributor to any project.</p>
<p><strong>The Greenhouse</strong> is a personal business of my own with the goal of helping local entrepreneurs and small businesses plan out their ideas and strategies while helping make technology their new competitive advantage.  Be it small business consultation, advice on creating a blog or content based website, coding help or mentorship, presentation or speaking opportunities, business or product development, and everything in between, I am there and ready to answer questions and help solve any technical problems or questions you have!</p>
<p>I'm always up to something online be it on <a href="https://twitter.com/thegreenhouseio">twitter</a> <a href="https://medium.com/@thegreenhouseio">Medium</a>, or around the local <a href="https://www.pvdgeeks.org">Rhode Island Tech Meetup Community</a>, so I hope to hear from you!</p>
<p class="cta"><i>Let's build something great!</i></p>
<hr>
    </div>
  
      </section>

      <section class="row">
        <app-footer><!---->
      <footer class="style-scope app-footer">
        <ul class="style-scope app-footer">
          <li class="style-scope app-footer">
            <app-social-icon-link name="linkedin" class="style-scope app-footer"><!---->
      <a rel="noopener" target="_blank" href="https://www.linkedin.com/in/owen-buckley-91393447/" click="getOutboundLink('https://www.linkedin.com/in/owen-buckley-91393447/');" class="style-scope app-social-icon-link">
        <img src="/assets/logos/linkedin.svg" alt="linkedin logo" class="style-scope app-social-icon-link">
      </a>
    <style class="style-scope app-social-icon-link">
      :host img {
        display: block;
        height: 60px;
        width: 60px;
        margin: 0 10px;
      }
    </style></app-social-icon-link>
          </li>

          <li class="style-scope app-footer">
            <app-social-icon-link name="twitter" class="style-scope app-footer"><!---->
      <a rel="noopener" target="_blank" href="https://twitter.com/thegreenhouseio" click="getOutboundLink('https://twitter.com/thegreenhouseio');" class="style-scope app-social-icon-link">
        <img src="/assets/logos/twitter.svg" alt="twitter logo" class="style-scope app-social-icon-link">
      </a>
    <style class="style-scope app-social-icon-link">
      :host img {
        display: block;
        height: 60px;
        width: 60px;
        margin: 0 10px;
      }
    </style></app-social-icon-link>
          </li>

          <li class="style-scope app-footer">
            <app-social-icon-link name="medium" class="style-scope app-footer"><!---->
      <a rel="noopener" target="_blank" href="https://medium.com/@thegreenhouseio" click="getOutboundLink('https://medium.com/@thegreenhouseio');" class="style-scope app-social-icon-link">
        <img src="/assets/logos/medium.svg" alt="medium logo" class="style-scope app-social-icon-link">
      </a>
    <style class="style-scope app-social-icon-link">
      :host img {
        display: block;
        height: 60px;
        width: 60px;
        margin: 0 10px;
      }
    </style></app-social-icon-link>
          </li>

          <li class="style-scope app-footer">
            <app-social-icon-link name="github" class="style-scope app-footer"><!---->
      <a rel="noopener" target="_blank" href="https://github.com/thescientist13" click="getOutboundLink('https://github.com/thescientist13');" class="style-scope app-social-icon-link">
        <img src="/assets/logos/github.svg" alt="github logo" class="style-scope app-social-icon-link">
      </a>
    <style class="style-scope app-social-icon-link">
      :host img {
        display: block;
        height: 60px;
        width: 60px;
        margin: 0 10px;
      }
    </style></app-social-icon-link>
          </li>
        </ul>
        
        <span class="copyright style-scope app-footer">© Owen Buckley / thegreenhouse.io</span>
      </footer>
    <style class="style-scope app-footer">
      :host footer {     width: 50%;     margin: 0 auto;     text-align: center;   }   :host ul {     list-style: none;     padding: 0;     margin-top: 10px;   }   :host li {     display: inline-block;   }   :host .copyright {     display: inline-block;     margin: 10px auto;   }
    </style></app-footer>
      </section>
    </div>

  

</body></html>

But if I revert the data-gwd-opt="static" change, then everything is back to normal.

upgrade lit@2

48ffb35

thescientist13 added chore build stuff, deploy stuff, etc etc needs upstream Dependent on work / features from Greenwood labels Jul 29, 2021

thescientist13 self-assigned this Jul 29, 2021

thescientist13 mentioned this pull request Jul 29, 2021

Lit@2 Shady DOM styles not present when pre-rendering with puppeteer ProjectEvergreen/greenwood#675

Closed

8 tasks

thescientist13 removed the needs upstream Dependent on work / features from Greenwood label Oct 13, 2021

Merge branch 'master' into chore/upgrade-lit-2

d6ef175

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

upgrade lit@2 #234

upgrade lit@2 #234

thescientist13 commented Jul 29, 2021 •

edited

Loading

upgrade lit@2 #234

Are you sure you want to change the base?

upgrade lit@2 #234

Conversation

thescientist13 commented Jul 29, 2021 • edited Loading

Related Issue

Details

Before

After

thescientist13 commented Jul 29, 2021 •

edited

Loading