After using for a while, I came to realize that two of Astro's biggest features — islands and slots — both delight and frustrate me. Astro 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 what happens when Astro creates islands and slots. When Astro creates islands and slots Astro creates an tag, along with and tags when you include a component with client directives. astro-island style script ---
import Component from './components/Component.svelte'
---

<Component client:load /> If the component (with client directives) contains a , Astro will create a tag. This will be found within an . slot astro-slot astro-slot astro-island ---
import Component from './components/Component.svelte'
---

<Component client:load>
  <div>Some Slotted Content</div>
</Component> Now, if you include a component without client directives, Astro will not create and tags. astro-island astro-slot ---
import Component from './components/Component.svelte'
---

<Component>
  <div>Some Slotted Content</div>
</Component> 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 and . 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 and are present in the DOM. astro-island astro-slots astro-island astro-slot Direct descendant selectors no longer work Lobotomized owls no longer work Grid positioning no longer works CSS 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 and is in the DOM. astro-island astro-slot 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> But Astro creates this HTML because it has slots: <div class="Component">
  <astro-slot>
    <div>Some Content</div>
  </astro-slot>
</div> If you wrote a direct descendant selector, that selector wouldn't work. That's because the direct descendant selector now targets the level children instead of the one you are aiming for. astro-slot /* No longer works */
.Component > div {
  /* Styles here */
} Fixing it in the selector chain. Fixing direct descendant selectors with slots is simple — all you have to do is add astro-slot /* Works */
.Component > astro-slot > div {
  /* Styles here */
} 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 */
} if the HTML structure allows for it. Another alternative is simply to use descend selectors instead of direct descendant selectors /* Works */
.Component div {
  /* Styles here */
} Let's move on. Lobotomized owls no longer work Lobotomized owl is a way to style things with the sibling universal selectors. in 2014. It was first coined by Heydon Pickering /* Lobotomized owl selector */
* + * {
  /* Your styles here */
} 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;
} Unfortunately, these styles won't work on and tags because they use the property. astro-island astro-slot display: content Fixing it Elements with will have their styles ignored, so any styles added to these elements will be ignored. display: contents or . The easy way to fix this is to add the styles to the elements contained in astro-island astro-slot Here's what the CSS looks like. .Parent > * + *,
.Parent > * + :where(astro-island, astro-slot) > *:first-child {
  margin-top: 1rem;
} CSS Grid Positioning no longer works This one is similar to the lobotomized owl one — because Astro islands and slots use , no styles will work on them. display: contents These styles include , . So you will not be able to change the Conponent's positioning with . grid-column grid-row grid-column Here's an example where we laid all items out in a two-column grid. In this example, trying to use set on the and will not work. grid-column astro-island astro-slots ---
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> There are two ways to fix this problem. Fixing it and with the technique mentioned above. The first way is to bypass astro-island astro-slot .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;
} 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> .Grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}

.Grid > * {
  grid-column: 1 / -1;
} Nth-child no longer works as expected When Astro adds to the DOM, they also add and tags to the DOM at the same time. astro-island style script Since and tags are also considered children elements, you cannot depend on the selector to target the right element anymore. style script nth-child 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> This produces a DOM that looks like this. First element is a tag style Second element is a tag script Next three elements are tags astro-island Astro will only include and tags for the components once in
the DOM. This is why you see only one tag and one instead of
3 tags and 3 tags. style script style script style script If you want to get the first component with , you need to pass in instead of . That's because the first component is now the third element in the DOM tree. nth-child nth-child(3) nth-child(1) /* Style the first component, but it's the third child */
.Grid > *:nth-child(3) > .Component {
  background-color: red;
} 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 to style with a descendant selector to style the component. nth-child <div class="Grid">
  <div><Component client:load /></div>
  <div><Component client:load /></div>
  <div><Component client:load /></div>
</div> /* Tries to make all grid items span the full width */
.Grid > *:first-child .Component {
  background-color: red;
} and use instead. The second way is to stop using nth-child nth-of-type .Grid > astro-island:nth-of-type(1) > .Component {
  background-color: red;
} 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> Astro will create the following layout: in the top level astro-island in the second level (since gets content through a slot) astro-slot Component Another after since needs to have JavaScript functionality as well. astro-island astro-slot Nested I'm not sure whether this level of complexity is necessary though. Most of the time, I just one layer of and a layer of . So this should be an edge case more than anything else. astro-island astro-slot Wrapping up I've just shared with you when and how Astro creates and . I've also shared with you how to overcome the styling frustrations that happen when and elements are present in the DOM. astro-island astro-slot astro-island astro-slot 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! Originally published on my blog.

2022 - HackerNoon Contributor of the Year - Data Security

Read my articles here

Nominated for 2022 - HackerNoon Contributor of the Year - Data Security

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Scaling Styling Roadblocks Caused by Astro Islands and Slots

Too Long; Didn't Read

Zell Liew

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Scaling Styling Roadblocks Caused by Astro Islands and Slots

Too Long; Didn't Read

Zell Liew

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES