diff options
| -rw-r--r-- | .changeset/old-fireants-allow.md | 5 | ||||
| -rw-r--r-- | packages/integrations/lit/server.js | 6 | ||||
| -rw-r--r-- | packages/integrations/lit/test/server.test.js | 11 |
3 files changed, 21 insertions, 1 deletions
diff --git a/.changeset/old-fireants-allow.md b/.changeset/old-fireants-allow.md new file mode 100644 index 000000000..4857a7a7c --- /dev/null +++ b/.changeset/old-fireants-allow.md @@ -0,0 +1,5 @@ +--- +'@astrojs/lit': patch +--- + +Render DSD attributes based on `shadowRootOptions` diff --git a/packages/integrations/lit/server.js b/packages/integrations/lit/server.js index da571466f..aa91d1ea8 100644 --- a/packages/integrations/lit/server.js +++ b/packages/integrations/lit/server.js @@ -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>'; } diff --git a/packages/integrations/lit/test/server.test.js b/packages/integrations/lit/test/server.test.js index 439c0877d..af1f99c71 100644 --- a/packages/integrations/lit/test/server.test.js +++ b/packages/integrations/lit/test/server.test.js @@ -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}>`, + }); + }); }); |