Getting started with slots

Any _imports file can have a special tag inside called a <sergey-slot />. This slot provides a neat way to inject content within the component.

Let's take a <head> of the page example. Here's our markup:

Our SEO senses tell us that a page title per page would be a good thing. But now we're using Sergey, all of the <title> tags are stored away in the one file.

To kick off, we can swap in a <sergey-slot /> tag:

To fill that slot with content, we alter our original <sergey-import /> tag in a very HTML-y way:

That's it! If you pass in a title (or any other tags), it'll render it in place of the slot.

Default slots

If you want some default content to render when nothing's passed into the slot, expand the <sergey-slot /> tag to include that content:

Named slots

The humble slot is great, but sometimes it's handy to pass multiple bits of data into a component. This is where named slots come in.

Note, named slots are a more advanced feature, so don't feel you have to rush to use them, only break them out when you need to. They are comprised of two parts:

You can kinda think of these as variables. The template is the 'variable definition' and is used within a sergey-import tag. It's where you define the content that'll get injected into the slot.

The slot with the name attribute tells Sergey where you'd like to put the content. Top tip, you can have multiple slots per template! This is really handy for meta titles and descriptions.

Here's a blog preview example. We've defined two slots for the page title and author:

To fill them in, we pass in two templates wherever we import the head.html file:

Page templates with slots

One neat thing you can do with slots is build page templates!

Let's create _imports/template.html file:

Note that _imports can include other imports! This template pulls in a head (with a slot), header and a footer. It also leaves space for a slot.

In our index.html file, instead of calling in all those imports individually, we can simply wrap our page-specific content in one <sergey-import /> and it'll get squirted into the template. Look how tiny our page has become!

To create a new page, all you need to do is copy/paste those three lines into a new file, and start writing!

If we really wanted to supercharge this, we could use named slots to control various parts of the template! The sky's the limit!