This actually doesn't take place during development, so it is very common to see layout shifts and FOUC, as well as not having the same behavior during development and production! 🫨
Details
The main trick is what to do about the <script> tag in the head, because if you have a Light DOM component, e.g.
// src/components/header.js
export default class Header extends HTMLElement {
connectedCallback() {
this.innerHTML = '<h1>Welcome to my website!</h1>'
}
}
customElements.define('x-header', Header);
if you don't "guard" it like you would with declarative shadow DOM, e.g.
'
}
}
customElements.define('x-header', Header);
```
You'll see duplicate rendering.
// TODO get a screenshot! @thescientist13
So maybe could we strip the ` Githubissues.
Githubissues is a development platform for aggregating issues.
Summary
While Greenwood supports prerendering pages at build time, for example, having a "client" side component like this
This actually doesn't take place during development, so it is very common to see layout shifts and FOUC, as well as not having the same behavior during development and production! 🫨
Details
The main trick is what to do about the
<script>tag in the head, because if you have a Light DOM component, e.g.if you don't "guard" it like you would with declarative shadow DOM, e.g.
Welcome to my website!
' } } customElements.define('x-header', Header); ``` You'll see duplicate rendering. // TODO get a screenshot! @thescientist13 So maybe could we strip the ` Githubissues.