diff options
author | 2023-01-07 14:29:16 +0100 | |
---|---|---|
committer | 2023-01-07 08:29:16 -0500 | |
commit | f7aa1ec25d1584f7abd421903fbef66b1c050e2a (patch) | |
tree | 9dd24d486cfa00177abeea1b5f3210c57c26b7ea /packages/integrations/lit/server.js | |
parent | ec5a39c299ffc5293a4964198cc3811b210d510a (diff) | |
download | astro-f7aa1ec25d1584f7abd421903fbef66b1c050e2a.tar.gz astro-f7aa1ec25d1584f7abd421903fbef66b1c050e2a.tar.zst astro-f7aa1ec25d1584f7abd421903fbef66b1c050e2a.zip |
[@astrojs/lit] Fix slotted content into main (#5791)
* Fix add the missing slot attribute to child nodes
* Add lit slot tests
* Add changeset
Diffstat (limited to 'packages/integrations/lit/server.js')
-rw-r--r-- | packages/integrations/lit/server.js | 21 |
1 files changed, 16 insertions, 5 deletions
diff --git a/packages/integrations/lit/server.js b/packages/integrations/lit/server.js index 2f9076672..59c79f55b 100644 --- a/packages/integrations/lit/server.js +++ b/packages/integrations/lit/server.js @@ -1,6 +1,7 @@ import './server-shim.js'; import '@lit-labs/ssr/lib/render-lit-html.js'; import { LitElementRenderer } from '@lit-labs/ssr/lib/lit-element-renderer.js'; +import * as parse5 from 'parse5'; function isCustomElementTag(name) { return typeof name === 'string' && /-/.test(name); @@ -58,12 +59,22 @@ function* render(Component, attrs, slots) { yield '</template>'; } if (slots) { - for (const [slot, value] of Object.entries(slots)) { - if (slot === 'default') { - yield `<astro-slot>${value || ''}</astro-slot>`; - } else { - yield `<astro-slot slot="${slot}">${value || ''}</astro-slot>`; + for (let [slot, value = ''] of Object.entries(slots)) { + if (slot !== 'default' && value) { + // Parse the value as a concatenated string + const fragment = parse5.parseFragment(`${value}`); + + // Add the missing slot attribute to child Element nodes + for (const node of fragment.childNodes) { + if (node.tagName && !node.attrs.some(({ name }) => name === 'slot')) { + node.attrs.push({ name: 'slot', value: slot}); + } + } + + value = parse5.serialize(fragment); } + + yield value; } } yield `</${tagName}>`; |