Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-20 22:12:38 -05:00
Code Issues Activity

Fix Lit integration hydration ordering (#9018)

Browse source 
* Provide renderer instance to `customElementHostStack`

* Add changeset
This commit is contained in:
Augustine Kim 2023-11-08 05:25:39 -08:00 • committed by GitHub
parent 3c17b59f2d
commit 23c9a30ad8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/spotty-rings-crash.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/lit': patch
---
Fix hydration ordering of nested custom elements. Child components will now wait for their parents to hydrate before hydrating themselves.

2
packages/integrations/lit/server.js
View file

@ -62,7 +62,7 @@ function* render(Component, attrs, slots) {
const shadowContents = instance.renderShadow({
elementRenderers: [LitElementRenderer],
customElementInstanceStack: [instance],
customElementHostStack: [],
customElementHostStack: [instance],
deferHydration: false,
});
if (shadowContents !== undefined) {

3
packages/integrations/lit/test/server.test.js
View file

@ -112,6 +112,9 @@ describe('renderToStaticMarkup', () => {
const render = await renderToStaticMarkup(tagName);
const $ = cheerio.load(render.html);
expect($(`${tagName} template`).text()).to.contain('child');
// Child component should have `defer-hydration` attribute so it'll only
// hydrate after the parent hydrates
expect($(childTagName).attr('defer-hydration')).to.equal('');
});
it('should render DSD attributes based on shadowRootOptions', async () => {