summaryrefslogtreecommitdiff
path: root/packages/integrations/lit/server.js
diff options
context:
space:
mode:
authorGravatar Sebastiaan <ba55ie@users.noreply.github.com> 2023-01-07 14:29:16 +0100
committerGravatar GitHub <noreply@github.com> 2023-01-07 08:29:16 -0500
commitf7aa1ec25d1584f7abd421903fbef66b1c050e2a (patch)
tree9dd24d486cfa00177abeea1b5f3210c57c26b7ea /packages/integrations/lit/server.js
parentec5a39c299ffc5293a4964198cc3811b210d510a (diff)
downloadastro-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.js21
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}>`;