web components (custom-element) support: Conversion from .astro component to createComponent break when an anchor tag is introduced #1059
Labels
needs triage
Issue needs to be triaged
Comments
|
BTW, if I do not use declarative ShadowDOM and do not nest the custom element and AstroStack TracecreateComponent for the
|
|
UPDATE: I was able to "fix" this by changing the data structure and looping over the social platforms to create the list items. I have "fix" in quotations because I am still unsure why having the list items hard-coded inside the Here is the part that changed: <ul class="user-card-social">
{Object.entries(user.social).map(([key, value]) => (
<li>
<a
class={`icon icon-social-${key}`}
href={value.url}
target="_blank"
rel="noopener noreferrer"
>
<span class="visually-hidden">
Follow {user.firstName} on {value.name}
</span>
</a>
</li>
))}
</ul>The entire component can be reviewed here and the commit with the change(s) can be reviewed here. |
|
This is a compiler bug. The most minimal repro I could do is this: ---
const users = []
---
<nimbus-team>
<template>
{
users.map((user) => (
<a href={user}>{user}</a>
))
}
</template>
</nimbus-team>That is compiled to: import {
Fragment,
render as $$render,
createAstro as $$createAstro,
createComponent as $$createComponent,
renderComponent as $$renderComponent,
renderHead as $$renderHead,
maybeRenderHead as $$maybeRenderHead,
unescapeHTML as $$unescapeHTML,
renderSlot as $$renderSlot,
mergeSlots as $$mergeSlots,
addAttribute as $$addAttribute,
spreadAttributes as $$spreadAttributes,
defineStyleVars as $$defineStyleVars,
defineScriptVars as $$defineScriptVars,
renderTransition as $$renderTransition,
createTransitionScope as $$createTransitionScope,
} from "astro/runtime/server/index.js";
const $$Astro = $$createAstro();
const Astro = $$Astro;
const $$Card = $$createComponent(async ($$result, $$props, $$slots) => {
const Astro = $$result.createAstro($$Astro, $$props, $$slots);
Astro.self = $$Card;
const users = []
return $$render`${$$renderComponent($$result,'nimbus-team','nimbus-team',{},({"default": () => $$render`
<template>
${
users.map((user) => (
$$render`${$$maybeRenderHead($$result)}<a${$$addAttribute(user, "href")}>${user}</a>`
))
}
</template><a${$$addAttribute(user, "href")}>
</a>`,}))}`;
}, 'Card.astro', undefined);
export default $$Card;Notice the extra |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Astro Info
If this issue only occurs in one browser, which browser is a problem?
No response
Describe the Bug
After reducing the test case to the following:
The build works without any trouble. When I wrap this in a
templateelement as follows, everything is still A-OK:If I know add my wrapper custom element:
The build fails with:
Stack Trace
After referring to the generated intermediary
dist/pages/index.astro.mjsone can see that the conversion from the Astro component to JS is going awry:A few standout items for me:
nimbus-teamis repeated twice in the signature. Having not looked at the signature, it could be that this is as expected, but it reads a little curious to me.The use of
user2here instead ofuseras defined in the Astro component seems odd and is the cause of theuser is undefinederror a bit later in this snippet.The
renderTemplatefunction call seems to end abruptly after the last closing list item even though it starts from<template shadowrootmode="open">.The anchor element
<a${addAttribute(mailto:${user2.email}, "href")}>${user2.email}</a>from a little earlier in the snippet is replicated twice more and in fact, the last of these wraps thescriptelement.What is also curious here is that:
template_and${user2.email}of the anchor element is removed.This is truly peculiar and I would be happy to assist further in tracking down and fixing whatever is causing this. You can see the full Astro component at the following URL:
https://github.com/schalkneethling/neo-shadow/blob/main/src/components/NimbusTeam.astro
What's the expected result?
The build succeeds and produces the expected HTML.
Link to Minimal Reproducible Example
https://github.com/schalkneethling/neo-shadow/blob/main/src/components/NimbusTeam.astro
Participation
The text was updated successfully, but these errors were encountered: