[html] Support nesting components

[terrablue]

It's currently impossible to nest components, i.e.

import {router, html} from "primate";

router.get("/", html`<parent-component />`);

<!-- in parent-component -->
<child-component />

Doesn't expand <child-component>.

Additionally, there is the issue of passing fixed strings vs. values to child components. In JS this is not a problem, as we use template literals. But in HTML there is no distinction between strings and values.

A possible solution is to adhere to data attributes and use them to pass data, and otherwise treat everything as literal, e.g.

import {router, html} from "primate";

router.get("/", html`<parent-component user=${{"name": "Donald"}} />`);

<!-- in parent-component -->
<child-component label="user" data-user="user" />

<!-- in child-component -->
<span data-value="label"></span>
<span data-value="user"></span>

This, however, might seem inconsistent with the JS side and would result in conflicts if the data attribute and the normal attribute are called the same.

An alternative would be to force using template literals for actual data, and treat everything else as text in components.

<!-- in parent-component -->
<child-component label="user" user="${user}" />

<!-- in child-component -->
<span data-value="label"></span>
<span data-value="user"></span>

This raises the question whether enforcing the template literal syntax should be limited to component tags or to all HTML code within components, to reach uniformity at the cost of being more verbose.

[terrablue]

16d1757 enforces using template literals and quotes in all HTML code.

[terrablue]

done as of dac5ac7