diff options
| -rw-r--r-- | .changeset/spotty-rings-crash.md | 5 | ||||
| -rw-r--r-- | packages/integrations/lit/server.js | 2 | ||||
| -rw-r--r-- | packages/integrations/lit/test/server.test.js | 3 |
3 files changed, 9 insertions, 1 deletions
diff --git a/.changeset/spotty-rings-crash.md b/.changeset/spotty-rings-crash.md new file mode 100644 index 000000000..c4522f96e --- /dev/null +++ b/.changeset/spotty-rings-crash.md @@ -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. diff --git a/packages/integrations/lit/server.js b/packages/integrations/lit/server.js index d71ccee47..b5e56f3c2 100644 --- a/packages/integrations/lit/server.js +++ b/packages/integrations/lit/server.js @@ -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) { diff --git a/packages/integrations/lit/test/server.test.js b/packages/integrations/lit/test/server.test.js index 557832db5..08c69965a 100644 --- a/packages/integrations/lit/test/server.test.js +++ b/packages/integrations/lit/test/server.test.js @@ -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 () => { |