Overcoming styling frustrations caused by Astro islands and slots

Zell Liew 🤗 - May 25 '23 - - Dev Community

After using Astro for a while, I came to realize that Astro's biggest features — islands and slots — both delight and frustrate me.

Most people already know what the delights are, so I won't bother writing about them in this article. I'll focus on what frustrates me and how I resolve those frustrations.

First, we need to talk about when Astro creates islands and slots.

When Astro creates islands and slots

Astro creates an astro-island tag, along with style and script tags when you include a component with client directives.

---
import Component from './components/Component.svelte'
---

<Component client:load />
Enter fullscreen mode Exit fullscreen mode

If the component (with client directives) contains a slot, Astro will create an astro-slot tag. This astro-slot will be found within an astro-island.

---
import Component from './components/Component.svelte'
---

<Component client:load>
  <div>Some Slotted Content</div>
</Component>
Enter fullscreen mode Exit fullscreen mode

Now, if you include a component without client directives, Astro will not create astro-island and astro-slot tags.

---
import Component from './components/Component.svelte'
---

<Component>
  <div>Some Slotted Content</div>
</Component>
Enter fullscreen mode Exit fullscreen mode

What's frustrating about Astro islands and slots

Since Astro only creates these tags when you include client directives, styling components can become unpredictable — because some components will have client directives while others won't.

Problems arise when the DOM contains astro-island and astro-slots. That's because these tags change the document flow, so you cannot pretend that they don't exist.

To be more specific, I noticed four extremely frustrating things when astro-island and astro-slot are present in the DOM.

  1. Direct descendant selectors no longer work
  2. Lobotomized owls no longer work
  3. CSS Grid positioning no longer works
  4. Nth-child no longer works

I'm going to talk about each one in turn, and how to resolve these frustrations.

Direct descendant selectors no longer work

Direct descendant selectors no longer work when astro-island and astro-slot is in the DOM.

This makes sense because the DOM has changed, so direct descendant selectors no longer target the element you wish to target.

Imagine you want to have this HTML

<div class="Component">
  <div>Some Content</div>
</div>
Enter fullscreen mode Exit fullscreen mode

But Astro creates this HTML because it has slots.

<div class="Component">
  <astro-slot>
    <div>Some Content</div>
  </astro-slot>
</div>
Enter fullscreen mode Exit fullscreen mode

If you wrote a direct descendant selector, that selector wouldn't work. That's because the direct descendant selector now targets the astro-slot level children instead of the one you are aiming for.

/* No longer works */
.Component > div {
  /* Styles here */
}
Enter fullscreen mode Exit fullscreen mode

Fixing it

Fixing direct descendant selectors with slots is simple — all you have to do is add astro-slot in the selector chain.

/* Works */
.Component > astro-slot > div {
  /* Styles here */
}
Enter fullscreen mode Exit fullscreen mode

The above code snippets assume you're writing global CSS. If you're using CSS Scoped to the component, you'll have to write the following instead since we're dealing with slots.

/* Scoped CSS*/
.Component :global(> astro-slot > div) {
  /* Styles here */
}
Enter fullscreen mode Exit fullscreen mode

Another alternative is simply to use descend selectors instead of direct descendant selectors if the HTML structure allows for it.

/* Works */
.Component div {
  /* Styles here */
}
Enter fullscreen mode Exit fullscreen mode

Let's move on.

Lobotomized owls no longer work

Lobotomized owl is a way to style things with the sibling universal selectors. It was first coined by Heydon Pickering in 2014.

/* Lobotomized owl selector */
* + * {
  /* Your styles here */
}
Enter fullscreen mode Exit fullscreen mode

The lobotomized owl selector can be used to style children elements easily — giving them margins, paddings, and other properties as necessary.

Here's an example that I commonly use to give some space between elements.

.Parent > * + * {
  margin-top: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

Unfortunately, these styles won't work on astro-island and astro-slot tags because they use the display: content property.

Fixing it

Elements with display: contents will have their styles ignored, so any styles added to these elements will be ignored.

The easy way to fix this is to add the styles to the elements contained in astro-island or astro-slot.

Here's what the CSS looks like.

.Parent > * + *,
.Parent > * + :where(astro-island, astro-slot) > *:first-child {
  margin-top: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

CSS Grid Positioning no longer works

This one is similar to the lobotomized owl one — because Astro islands and slots use display: contents, no styles will work on them.

These styles include grid-column, grid-row. So you will not be able to change the Conponent's positioning with grid-column.

Here's an example where we laid all items out in a two-column grid. In this example, trying to use set grid-column on the astro-island and astro-slots will not work.

---
import Component from './Component.svelte'
---

<div class='Grid'>
  <Component client:load />
  <Component client:load />
  <Component client:load />
</div>

<style>
  .Grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
  }

  /* Tries to make all grid items span the full width */
  .Grid > * {
    grid-column: 1 / -1;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

There are two ways to fix this problem.

Fixing it

The first way is to bypass astro-island and astro-slot with the technique mentioned above.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}

/* Tries to make all grid items span the full width */
.grid > *,
.grid > :where(astro-island, astro-slot) > *:first-child {
  grid-column: 1 / -1;
}
Enter fullscreen mode Exit fullscreen mode

The second way is to put the components in another element.

<div class="Grid">
  <div><Component client:load /></div>
  <div><Component client:load /></div>
  <div><Component client:load /></div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.Grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}

.Grid > * {
  grid-column: 1 / -1;
}
Enter fullscreen mode Exit fullscreen mode

Nth-child no longer works as expected

When Astro adds astro-island to the DOM, they also add styleand script tags to the DOM at the same time.

Since style and script tags are also considered children elements, you cannot depend on the nth-child selector to target the right element anymore.

Using the same code examples from above, let's say we have the following HTML.

<div class="Grid">
  <Component client:load></Component>
  <Component client:load></Component>
  <Component client:load></Component>
</div>
Enter fullscreen mode Exit fullscreen mode

This produces a DOM that looks like this.

  • First element is a style tag
  • Second element is a script tag
  • Next three elements are astro-island tags

Astro will only include style and script tags for the components once in the DOM. This is why you see only one style tag and one script instead of 3 style tags and 3 script tags.

If you want to get the first component with nth-child, you need to pass in nth-child(3) instead of nth-child(1). That's because the first component is now the third element in the DOM tree.

/* Style the first component, but it's the third child */
.Grid > *:nth-child(3) > .Component {
  background-color: red;
}
Enter fullscreen mode Exit fullscreen mode

Yes, I know it's confusing.

There are two ways to fix this confusing problem

Fixing it

The first way is to wrap the components with another element.

You can then use nth-child to style with a descendant selector to style the component.

<div class="Grid">
  <div><Component client:load /></div>
  <div><Component client:load /></div>
  <div><Component client:load /></div>
</div>
Enter fullscreen mode Exit fullscreen mode 
/* Tries to make all grid items span the full width */
.Grid > *:first-child .Component {
  background-color: red;
}
Enter fullscreen mode Exit fullscreen mode

The second way is to stop using nth-child and use nth-of-type instead.

.Grid > astro-island:nth-of-type(1) > .Component {
  background-color: red;
}
Enter fullscreen mode Exit fullscreen mode

A deeper layer of frustrations

Things get a little bit more confusing if you need to pass a component into a slot — especially if both components (the parent one and the one in the slot) need JavaScript functionality.

---
import Component from './components/Component.svelte'
import Nested from './components/Nested.svelte'
---

<Component client:load>
  <Nested client:load />
</Component>
Enter fullscreen mode Exit fullscreen mode

Astro will create the following layout:

  1. astro-island in the top level
  2. astro-slot in the second level (since Component gets content through a slot)
  3. Another astro-island after astro-slot since Nested needs to have JavaScript functionality as well.

I'm not sure whether this level of complexity is necessary though.

Most of the time, I just one layer of astro-island and a layer of astro-slot. So this should be an edge case more than anything else.

Wrapping up

I've just shared with you when and how Astro creates astro-island and astro-slot.

I've also shared with you how to overcome the styling frustrations that happen when astro-island and astro-slot elements are present in the DOM.

With this, you should now be able to use Astro effectively without encountering further styling issues.

Hope you find this useful in your coding journey.

If you wish to receive more in-depth articles about Astro, Svelte, and other web development topics, feel free to sign up for my newsletter below.

That's it for today. Thanks for reading!

By the way, this article is originally written on my blog. Feel free to visit that if you want to have these articles delivered to your email first-hand whenever they're released! 🙂.

Image
Magia Sypialni: Jak Wybrać Idealne Meble dla Twojego Azylu
Image
Alternatives for New AWS Users Restricted from Creating Repositories in CodeCommit
Image
10 Top Mobile Apps For Accident & Injury Lawyers
Image
Mandovi Motors Diwali Offers
Image
10 Facebook Pages That Are The Best Of All Time About Va Asbestos Claims
Image
Why Modern Car Buyers Are Choosing Premium Hatchbacks Over Traditional Sedans
Image
Kapan Harus Stop Kerjakan Taruhan Judi Online?
Image
cara mendapati bonus jekpot slots online ringan
Image
Top Fuel-Efficient Maruti Suzuki Cars That Save You Big

marutisuzuki, mandovimotors
Image
【HH88體育HH88博彩資訊|實況力量HH88足球wiki】
Image
teknik ringan memperoleh jekpot di slots online
Image
Understanding the Customer Persona Discovery Market: Key Trends, Opportunities, and Challenges
Image
12 Facts About Replace A Lost Car Key To Make You Look Smart Around Other People
Image
Zanurz się w Świecie Mebli: Twórz Przestrzeń, Która Inspiruje!
Image
Panduan Memperoleh Bonus Referal Agen Judi Online
Image
Conducting a Dilapidations Survey: A Step-by-Step Guide
Image
16 Must-Follow Instagram Pages For Remote Key Repair-Related Businesses
Image
5 Laws That Can Help The Car Key Repair Cost Industry
Image
Watch Out: What Accident Lawyers Panama City Is Taking Over And How To Stop It
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .