Fix lit integration nested component rendering (#6752)
* Provide renderInfo to renderShadow * Add test for rendering nested components * Add changeset
This commit is contained in:
parent
4cc1bf61b8
commit
c7eb0d4310
3 changed files with 35 additions and 1 deletions
5
.changeset/angry-hounds-train.md
Normal file
5
.changeset/angry-hounds-train.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'@astrojs/lit': patch
|
||||
---
|
||||
|
||||
Provide `renderInfo` when rendering Lit components. Fixes issue with rendering nested components.
|
|
@ -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
|
||||
|
|
|
@ -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`<p>child</p>`;
|
||||
}
|
||||
}
|
||||
);
|
||||
customElements.define(
|
||||
tagName,
|
||||
class extends LitElement {
|
||||
render() {
|
||||
return html`<child-component></child-component>`;
|
||||
}
|
||||
}
|
||||
);
|
||||
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(
|
||||
|
|
Loading…
Reference in a new issue