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>