Lit@2 Shady DOM styles not present when pre-rendering with puppeteer #675
Comments
|
Not sure this warrants a |
|
Some initial experiments with upgrading puppeteer - #699 |
|
Should also test new polyfills for declarative shadow dom |
|
So it may be down to how Lit now renders web components / Shadow DOM now and what impact it may have on how styles / Shadow DOM gets rendered out now through puppeteer? I know they're SSR implementation has now moved to rendering out to Declarative Shadow DOM, e.g. <template shadowroot="open">
...
<template>For example, I now see a difference in how the serialized HTML is coming out. Before, we would see something like this with the custom element tag name as the CSS selector <!-- Shady DOM styles for app-header --><style scope="app-header">app-header .header.app-header {
background-color: #192a27; min-height: 30px; padding: 10px; font-size: 1.2rem;
}
app-header .header.app-header a.app-header {
color: white; text-decoration: none;
}
app-header .header.app-header .project-name.app-header {
margin: -2px 0 auto; padding: 0; padding-top: 4px; display: inline-block; color: #201e2e; font-weight: bold;
}
app-header .header.app-header .head-wrap.app-header {
display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between;
}
@media (max-width: 768px) {
app-header .header.app-header .head-wrap.app-header {
flex-direction: column; text-align: center
}
Now, we see it like this, using </div>
</eve-container>
</header>
<style class="style-scope app-header">
:host .header { background-color: #192a27; min-height: 30px; padding: 10px; font-size: 1.2rem; } :host .header a { color: white; text-decoration: none; } :host .header .project-name { margin: -2px 0 auto; padding: 0; padding-top: 4px; display: inline-block; color: #201e2e; font-weight: bold; } :host .header .head-wrap { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; } @media (max-width: 768px) { :host .header .head-wrap { flex-direction: column; text-align: center } } :host .header nav { justify-items: left; width: 55%; } :host .header nav ul { padding: 0; margin: 0; list-style: none; text-align: center; } :host .header nav ul li { margin: 0; color: white; display: inline-block; padding: 10px; } :host .header nav ul li:hover, :host .header nav ul li:focus { color: #f9e7ca; } :host .header nav ul li:hover a, :host .header nav ul li:focus a { color: green; } @media (max-width: 768px) { :host .header nav { width: 100% } } :host .header .brand { justify-items: left; padding: 10px; } :host .header .brand img { float: left; height: 30px; width: 30px; margin-right: 0.5rem; } :host .header .social { margin-left: auto; text-align: right; } :host .header .social img { width: 84px; height: 20px; }
</style></app-header>
Normally this probably wouldn't be an issue BUT combined with the strict optimization setting, which strips out the runtime JavaScript, we get no styles because Opened a PR to follow along with the WIP - #719 My guess it is a Lit thing since upgrading to Puppeteer against original Lit didn't cause any issues from what I could tell in #699 Found some interesting links to track though to see if we can get the old output we had, otherwise might have to warn about compatibility issues when using puppeteer? 🥺
|
|
OK, so as suspected, if I manually remove <!-- before -->
<style class="style-scope app-header">
:host .header { background-color: #192a27; min-height: 30px; padding: 10px; font-size: 1.2rem; } :host .header a { color: white; text-decoration: none; } :host .header .project-name { margin: -2px 0 auto; padding: 0; padding-top: 4px; display: inline-block; color: #201e2e; font-weight: bold; } :host .header .head-wrap { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; } @media (max-width: 768px) { :host .header .head-wrap { flex-direction: column; text-align: center } } :host .header nav { justify-items: left; width: 55%; } :host .header nav ul { padding: 0; margin: 0; list-style: none; text-align: center; } :host .header nav ul li { margin: 0; color: white; display: inline-block; padding: 10px; } :host .header nav ul li:hover, :host .header nav ul li:focus { color: #f9e7ca; } :host .header nav ul li:hover a, :host .header nav ul li:focus a { color: green; } @media (max-width: 768px) { :host .header nav { width: 100% } } :host .header .brand { justify-items: left; padding: 10px; } :host .header .brand img { float: left; height: 30px; width: 30px; margin-right: 0.5rem; } :host .header .social { margin-left: auto; text-align: right; } :host .header .social img { width: 84px; height: 20px; }
</style>
<!-- after -->
<style class="style-scope app-header">
.header { background-color: #192a27; min-height: 30px; padding: 10px; font-size: 1.2rem; } .header a { color: white; text-decoration: none; } .header .project-name { margin: -2px 0 auto; padding: 0; padding-top: 4px; display: inline-block; color: #201e2e; font-weight: bold; } .header .head-wrap { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; } @media (max-width: 768px) { .header .head-wrap { flex-direction: column; text-align: center } } .header nav { justify-items: left; width: 55%; } .header nav ul { padding: 0; margin: 0; list-style: none; text-align: center; } .header nav ul li { margin: 0; color: white; display: inline-block; padding: 10px; } .header nav ul li:hover, .header nav ul li:focus { color: #f9e7ca; } .header nav ul li:hover a, .header nav ul li:focus a { color: green; } @media (max-width: 768px) { .header nav { width: 100% } } .header .brand { justify-items: left; padding: 10px; } .header .brand img { float: left; height: 30px; width: 30px; margin-right: 0.5rem; } .header .social { margin-left: auto; text-align: right; } .header .social img { width: 84px; height: 20px; }
</style>
So it seems that if I can get those Shady DOM styles back, we should be able to keep things as is, but otherwise, it looks like a little manual intervention may be needed on the Greenwood side. The only challenge / risk I forsee is that not every instance of |
thescientist13
changed the title
thescientist13
changed the title
thescientist13
changed the title
thescientist13
changed the title
thescientist13
changed the title
Type of Change
Summary
Making a separate issue after observing this in #611 (comment) and also being able to reproduce in thegreenhouseio/www.thegreenhouse.io#234, but essentially the issue boils down to that puppeteer is not putting
<style>tags for Web Components in the<head>of the document anymore, which means if JS is disabled or Greenwood's static optimization setting is used, those fallback styles are no longer in index.html and thus everything looks borked, as you can see here.I think the issue comes down to something new that I think Lit@2 is doing, which is introducing the concept of Declarative Shadow DOM to their templating engine, to support SSR and that my initial hunch is that our old version of puppeteer doesn't know how to handle that?
So as mentioned, one way to still use DSD / Lit@2 now would be to just not use
static, e.g.Details
So to get a little technical first, the best way to understand what is happening I think is to first see what is happening. Basically, this is what index.html looks like now via puppeteer.
And here's what it looks like in #611 (notice the absence of
<style>blocks in the<head>and duplicated<app-header>tags)(if you view the source of the upgrade branch, you'll the HTML goes on for miles....
So a couple thoughts to address this:
HTMLElement(andLitElementvia a plugin) and give a more programmatic option that just pre-rendering with Puppeteerlit@2#611 should be some sort of sign we to do some sort of smoke testing / coverage for puppeteer?The text was updated successfully, but these errors were encountered: