manic bison
How do I get a child component to update a parent one?
Use-case: I want to update the page's meta tags (a link to a css and include a script). How would I do that?
It looks like slots might be it, but a specific slot already need to exist or is there a built-in "meta" slot with Astro?
manic bison
you mean to pass props?
placid pike
you mean to pass props?
Right, props, properties, fixed the typo 😉
manic bison
I do use a base layout for my project with a head, body, etc and I'm using that to wrap my page but creating a slot on the layout and then putting an item for that slot in a component isn't working
not exactly sure what am I doing wrong or how to go about it with props
give me a sec, I'll post some code here for reference
BaseLayout has this:
Then I have a PageLayout and a BlogLayout.
The PageLayout imports the BaseLayout above, and in my BlogLayout I import PageLayout and I have this:
I am seeing tester2 meta tag on the page, but I am not seeing tester1 on the page which should've been injected to the headings slot
If I do move the slot definition <slot name="headings" /> from the BaseLayout to the PageLayout which is the one that the BlogLayout uses immediately as a parent, then it does work. Does this mean that slots are only usable within immediate parent-child and can't be used in deeper nested hierarchy?
manic bison
what would be an ideal way of doing that?
placid pike
I think this needs a minimal example repo.
I think the conventional way is top down, but for metadata you need somehow bottom-up, which is with props unpracticle.
placid pike
@manic bison sorry I deleted some comments cause actually I misread your post you have a special case of script and css and what you meant is <head> tag not meta tag, I think. some of the head tag have meta but the one you're interested in are script and links and style. I have to check that out
see in this example all Card script and css goes in the head tag nothing in the body, that can be related to a bug if you e.g. write the style or script above the component html, you need to reproduce this in a minimal repo so that someone can have a look and try to fix it
see the example here https://github.com/MicroWebStacks/astro-examples#04_client-counters
manic bison
not really sure what I'm supposed to look for there 😦
I don't actually want to populate the head tag, but rather want to add to its content (meta tags, css links, and script sources) from a child component
flint yarrow
If it's just like svelte:head in svelte, it's not supported in Astro
https://svelte.dev/tutorial/svelte-head