🧵 Enhancement/serialization #5
Conversation
There was a problem hiding this comment.
Per @hutchgrant , looks like there is some CSS is missing possibly and also there is body[unresolved]?
<!DOCTYPE html><html lang="en" prefix="og:http://ogp.me/ns#"><head><!-- Shady DOM styles for app-header --><!-- Shady DOM styles for app-footer --><!-- Shady DOM styles for my-counter --><style>body {transition: opacity ease-in 0.2s; }
body[unresolved] {opacity: 0; display: block; overflow: hidden; position: relative; }
</style>
|
Did a little research and I don't think there are any styles missing per se since we're not using Shadow DOM in anyway like in Greenwood. If I add this to the Counter component though, then I will see serialized CSS static get styles() {
return css`
:host p {
color: #020202
}
`;
}<!DOCTYPE html><html lang="en" prefix="og:http://ogp.me/ns#"><head><!-- Shady DOM styles for app-header --><!-- Shady DOM styles for app-footer --><!-- Shady DOM styles for my-counter --><style scope="my-counter">my-counter p.my-counter {
color: #020202
}</style><style>body {transition: opacity ease-in 0.2s; }
body[unresolved] {opacity: 0; display: block; overflow: hidden; position: relative; }
</style>As far as Some related activities around this I think are worth looking into when trying this out in Greenwood are:
|
Summary
developandbuildInteresting that Lighthouse would suggest getting rid of the counter component's JS, as that is the actual interactive part. Footer and Header for sure. 🤔
No double renders so far though... 🤞
TODO
console.logs