Single slots are used when a child component only defines one slot
within its template. The page
component above uses a single slot to distribute content.
An example of the page
component's template using a single slot is below:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<slot>
This will only be displayed if there is no content
to be distributed.
</slot>
</body>
</html>
To illustrate how the slot works we can set up a page as follows.
<page>
<p>This content will be displayed within the page component</p>
</page>
The end result will be:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>This content will be displayed within the page component</p>
</body>
</html>
If we didn't put anything between the page
tags an instead had <page></page>
we would instead yield the following result since there is default content between the slot
tags in the page
component template.
<html>
<head>
<title>Page Title</title>
</head>
<body>
This will only be displayed if there is no content
to be distributed.
</body>
</html>