diff --git a/.changeset/angry-hounds-train.md b/.changeset/angry-hounds-train.md new file mode 100644 index 000000000..b42b89351 --- /dev/null +++ b/.changeset/angry-hounds-train.md @@ -0,0 +1,5 @@ +--- +'@astrojs/lit': patch +--- + +Provide `renderInfo` when rendering Lit components. Fixes issue with rendering nested components. diff --git a/packages/integrations/lit/server.js b/packages/integrations/lit/server.js index 762c77844..d4ca4e08f 100644 --- a/packages/integrations/lit/server.js +++ b/packages/integrations/lit/server.js @@ -59,7 +59,12 @@ function* render(Component, attrs, slots) { yield `<${tagName}${shouldDeferHydration ? ' defer-hydration' : ''}`; yield* instance.renderAttributes(); yield `>`; - const shadowContents = instance.renderShadow({}); + const shadowContents = instance.renderShadow({ + elementRenderers: [LitElementRenderer], + customElementInstanceStack: [instance], + customElementHostStack: [], + deferHydration: false, + }); if (shadowContents !== undefined) { const { mode = 'open', delegatesFocus } = instance.shadowRootOptions ?? {}; // `delegatesFocus` is intentionally allowed to coerce to boolean to diff --git a/packages/integrations/lit/test/server.test.js b/packages/integrations/lit/test/server.test.js index 51e083241..557832db5 100644 --- a/packages/integrations/lit/test/server.test.js +++ b/packages/integrations/lit/test/server.test.js @@ -90,6 +90,30 @@ describe('renderToStaticMarkup', () => { expect($(`${tagName} template`).text()).to.contain(`Hello ${prop1}`); }); + it('should render nested components', async () => { + const tagName = 'parent-component'; + const childTagName = 'child-component'; + customElements.define( + childTagName, + class extends LitElement { + render() { + return html`

child

`; + } + } + ); + customElements.define( + tagName, + class extends LitElement { + render() { + return html``; + } + } + ); + const render = await renderToStaticMarkup(tagName); + const $ = cheerio.load(render.html); + expect($(`${tagName} template`).text()).to.contain('child'); + }); + it('should render DSD attributes based on shadowRootOptions', async () => { const tagName = 'shadow-root-options-component'; customElements.define(