Index › 14. Special page slots
Learn about the special page slots – head, startOfBody, endOfBody and html – that you can use to inject content into different parts of your page.
Topics covered
- Special page slots.
In addition to the slots you can define and use while authoring Kitten apps, there are a handful of special preset slots you can use to send content into places you wouldn’t otherwise be able to reach from your pages as they lie outside where your page is rendered in Kitten’s internal base layout component.
The internal base layout component is fully customisable.
You refer to special page slots using properties of the kitten.page object – kitten.page.html, kitten.page.head, kitten.page.startOfBody and kitten.page.endOfBody – in the for attribute of a <content> tag.
The values of those properties are the uppercase strings HTML, HEAD, START_OF_BODY and END_OF_BODY, so <content for='HEAD'> also works. Lowercase literals such as for='head' do not.
The html slot is unique in that you are expected to provide just the opening <html> tag, not the full document. It’s there so you can specify a different language (e.g., <html lang='uk'> for Ukrainian). Since an opening tag without a closing tag is a syntax error in kitten.html, pass it through kitten.markAsTrusted(): <content for='${kitten.page.html}'>${kitten.markAsTrusted("<html lang='uk'>")}</content>. If the language is all you want to change, <page lang='uk'> does the same thing and is simpler. Do not return anything else in the content for this slot or the sky will fall on your head. 🙀
Here’s an example, showing you most of the special page slots in use:
index.page.js
export default () => kitten.html`
<content for='${kitten.page.head}'>
<title>Special page slots</title>
<link rel='icon' href='/favicon.ico'>
</content>
<h1>Special page slots</h1>
<h2>This is just regular content on the page.</h2>
<content for='${kitten.page.startOfBody}'>
<p>This is the <strong>start of the body</strong>.</p>
</content>
<content for='${kitten.page.endOfBody}'>
<p>This is the <strong>end of the body.</strong></p>
</content>
<style>
body { font-family: system-ui, sans-serif; }
p { padding: 1em; border: 0.25em solid deeppink; border-radius: 0.5em; }
</style>
`
You should see the following page in your browser:
Notice how you can use the head slot to set the title and specify an icon. Kitten has intelligent defaults for these that it uses if you forget (it tries to get the title from your page if you have a h1 tag and it sets the favicon to an empty one so you don‘t get load errors in your developer console, etc.)
Just like regular slots, you can specify more than one of the special page slots and any content you send there will stack.
You can also set some page properties using the <page> tag.
These are the title, charset, viewport, icon, lang and bodyClass properties. For anything else you want to add to the head of your web page, please use the special head page slot.
When you set the title, viewport, icon or charset in a head slot , that value overrides the same property in existing <page> tags. Properties not included in the head slot are populated from existing <page> tags or fall back to using Kitten’s defaults.
You can also use the <page> tag to add classes to the body tag (which is otherwise managed for you by Kitten).
e.g., <page bodyClass='someClass someOtherClass'>
For example, you could also have written the above example as follows:
export default () => kitten.html`
<page title='Special page slots' icon='/favicon.ico'>
<h1>Special page slots</h1>
…
`
Well, we’ve covered everything about components and fragments including all the different types of slots and layout components. So let’s learn about the unique way that Kitten – as a Small Web server – handles your cryptographic identity and authentication next.
Next tutorial: Authentication