Main Slot, Named Slots, and Slot Scopes

So lastly, before we actually move on to creating our components, let's cover slots. Slots allow us to insert specific HTML content into designated areas within our components.

The Main Slot

First, let's understand the main slot, which we've already touched upon in our app layout. Anything enclosed between the component's start and end tags is rendered as the default slot.

@layout.app({ title: request.params().name }) {{-- 👈 start tag --}}

  Our main slot content {{-- 👈 main slot --}}

@end {{-- 👈 end tag --}}

  

    

      Copied!
      

        

      
    
  
  
    
    
  

The main slot is accessible in the component by encompassing await $slots.main() with three curly braces. Remember, three curly braces allow us to plop raw HTML within EdgeJS.