[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:
Reece McDonald 2023-02-24 12:10:56 -06:00 committed by GitHub
parent 5aa6580f77
commit 26bf12ef3c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 1 deletions

View file

@ -0,0 +1,5 @@
---
'@astrojs/lit': patch
---
Render DSD attributes based on `shadowRootOptions`

View file

@ -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>';
}

View file

@ -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}>`,
});
});
});