#How to modify <head> in pages that use a parent Layout component

1 messages · Page 1 of 1 (latest)

severe gyro
#

I have a Layout component that has the following:

---
import '../styles/main.css';
import '../styles/tweaks.scss';
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Reel</title>
  </head>
  <body style="">
    <slot />
  </body>
</html>

is it possible somehow for a child component that uses Layout to modify or add to the <head>?

pseudo terraceBOT
#

Hi @severe gyro. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Yes, you can use named slots to modify or add content to the <head> from a child component. Named slots are a standard web feature used in browser APIs and web frameworks like Vue. Astro supports named slots in components, pages, and layouts.

To achieve this, you can add a named slot in your Layout component's <head>:

<head>
  ...
  <slot name="head" />
</head>

Then, in your child component, you can use the named slot to add or modify content in the <head>:

<Layout>
  <template slot="head">
    <!-- Add or modify content here -->
  </template>
  <!-- Other content -->
</Layout>

For more information on named slots, refer to the Astro 0.18 Release blog post (https://astro.build/blog/astro-018#named-slots-in-astro-components) and the Astro Components documentation (https://docs.astro.build/en/core-concepts/astro-components#slots).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Astro Documentation
Components

An intro to the .astro component syntax.

Astro
Astro 0.18 Release | Astro

Introducing: Responsive partial hydration • Solid.js support • Lit SSR support • Named slots • Global style support • and more!

#

@severe gyro kapa.ai is still learning and improving, please let us how it did by reacting below

severe gyro
#

@pseudo terrace I don't think this is correct. this winds up inserting <template> into the head:

    <template>
    <title>BONGOS!</title>
  </template>

which is not valid HTML

pseudo terraceBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Apologies for the confusion. You're right, the previous example would insert a <template> tag into the <head>, which is not valid HTML. Unfortunately, based on the provided extracts, there isn't a direct way to modify the <head> from a child component using Astro.

However, you can work around this limitation by using a prop to pass the additional content to the Layout component. Here's an example:

In your Layout component, add a prop for the additional head content:

---
import '../styles/main.css';
import '../styles/tweaks.scss';
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Reel</title>
    {Astro.props.headContent}
  </head>
  <body style="">
    <slot />
  </body>
</html>

Then, in your child component, pass the additional content as a prop:

<Layout headContent={`<title>BONGOS!</title>`}>
  <!-- Other content -->
</Layout>

Keep in mind that this approach has limitations, and you'll need to ensure that the content you pass as a prop is valid HTML.

For more information on using props in Astro components, refer to the Astro Components documentation (https://docs.astro.build/en/core-concepts/astro-components/#component-props).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Astro Documentation
Components

An intro to the .astro component syntax.

#

@severe gyro kapa.ai is still learning and improving, please let us how it did by reacting below

severe gyro
#

@pseudo terrace Too messy. This seems to work though:

<Layout>
  <title slot="head">
    Test!
  </title>
  <meta slot="head" name="description" content="Testing" />
  <PrivateReel reel={reel} />
</Layout>
pseudo terraceBOT
#

Let me check the knowledge base for you. One moment! :books:

#

You're right, using named slots without the <template> tag is a better approach. Your example correctly adds the <title> and <meta> tags to the <head> using named slots:

In your Layout component:

<head>
  ...
  <slot name="head" />
</head>

In your child component:

<Layout>
  <title slot="head">Test!</title>
  <meta slot="head" name="description" content="Testing" />
  <PrivateReel reel={reel} />
</Layout>

This approach allows you to add or modify content in the <head> from a child component using named slots. For more information on named slots, refer to the Astro Components documentation (https://docs.astro.build/en/core-concepts/astro-components#slots).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Astro Documentation
Components

An intro to the .astro component syntax.