[Lit] render DSD attributes based on shadowRootOptions
(#6351)
* [Lit] render DSD attributes based on `shadowRootOptions`
## Changes
- Update `@astrojs/lit`’s `server.js` to properly render elements with `delegatesFocus: false` set in their `shadowRootOptions`.
- Logic is based on `@lit-labs/ssr` [latest implementation as found here](b0c3f82ef0/packages/labs/ssr/src/lib/render-value.ts (L738)
)
## Testing
A test was added to ensure an element with `delegatesFocus` set to true has this attribute properly included in the rendered static markup.
* chore: add changeset
This commit is contained in:
parent
5aa6580f77
commit
26bf12ef3c
3 changed files with 21 additions and 1 deletions
5
.changeset/old-fireants-allow.md
Normal file
5
.changeset/old-fireants-allow.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'@astrojs/lit': patch
|
||||
---
|
||||
|
||||
Render DSD attributes based on `shadowRootOptions`
|
|
@ -62,7 +62,11 @@ function* render(Component, attrs, slots) {
|
|||
yield `>`;
|
||||
const shadowContents = instance.renderShadow({});
|
||||
if (shadowContents !== undefined) {
|
||||
yield '<template shadowroot="open" shadowrootmode="open">';
|
||||
const { mode = 'open', delegatesFocus } = instance.shadowRootOptions ?? {};
|
||||
// `delegatesFocus` is intentionally allowed to coerce to boolean to
|
||||
// match web platform behavior.
|
||||
const delegatesfocusAttr = delegatesFocus ? ' shadowrootdelegatesfocus' : '';
|
||||
yield `<template shadowroot="${mode}" shadowrootmode="${mode}"${delegatesfocusAttr}>`;
|
||||
yield* shadowContents;
|
||||
yield '</template>';
|
||||
}
|
||||
|
|
|
@ -83,4 +83,15 @@ describe('renderToStaticMarkup', () => {
|
|||
expect($(tagName).attr('attr1')).to.equal(attr1);
|
||||
expect($(`${tagName} template`).text()).to.contain(`Hello ${prop1}`);
|
||||
});
|
||||
|
||||
it('should render DSD attributes based on shadowRootOptions', async () => {
|
||||
const tagName = 'lit-component';
|
||||
customElements.define(tagName, class extends LitElement {
|
||||
static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true};
|
||||
});
|
||||
const render = await renderToStaticMarkup(tagName);
|
||||
expect(render).to.deep.equal({
|
||||
html: `<${tagName}><template shadowroot=\"open\" shadowrootmode=\"open\" shadowrootdelegatesfocus><!--lit-part--><!--/lit-part--></template></${tagName}>`,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue