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 `<${tagName}${shouldDeferHydration ? ' defer-hydration' : ''}`;
|
||||||
yield* instance.renderAttributes();
|
yield* instance.renderAttributes();
|
||||||
yield `>`;
|
yield `>`;
|
||||||
const shadowContents = instance.renderShadow({});
|
const shadowContents = instance.renderShadow({
|
||||||
|
elementRenderers: [LitElementRenderer],
|
||||||
|
customElementInstanceStack: [instance],
|
||||||
|
customElementHostStack: [],
|
||||||
|
deferHydration: false,
|
||||||
|
});
|
||||||
if (shadowContents !== undefined) {
|
if (shadowContents !== undefined) {
|
||||||
const { mode = 'open', delegatesFocus } = instance.shadowRootOptions ?? {};
|
const { mode = 'open', delegatesFocus } = instance.shadowRootOptions ?? {};
|
||||||
// `delegatesFocus` is intentionally allowed to coerce to boolean to
|
// `delegatesFocus` is intentionally allowed to coerce to boolean to
|
||||||
|
|
|
@ -90,6 +90,30 @@ describe('renderToStaticMarkup', () => {
|
||||||
expect($(`${tagName} template`).text()).to.contain(`Hello ${prop1}`);
|
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 () => {
|
it('should render DSD attributes based on shadowRootOptions', async () => {
|
||||||
const tagName = 'shadow-root-options-component';
|
const tagName = 'shadow-root-options-component';
|
||||||
customElements.define(
|
customElements.define(
|
||||||
|
|
Loading…
Add table
Reference in a new issue