feat: add a list of styles that can be injected into a template for FAST HTML

[janechu]

🙋 Feature Request

Styles including linked stylesheets may ccome from anywhere, to prevent this from becoming too prescriptive and having to include it into every component explicitly, we should have a hook in the declarative FAST HTML template.

💁 Possible Solution

On client side:

TemplateElement.options({
    name: 'my-custom-element',
    styles: Array<StyleElement>
});

Where StyleElement can be inline style tags or link stylesheets.

We would then expect the f-template to include this as a hook:

<f-template name="my-custom-element">
    <template>
        {{styles}}
        <!--other template elements-->
    </template>
</f-template>

Which can be used for SSR/BTR solutions to render this themselves.

Another solution would be to use this in an extendable abstract class such as RenderableFASTElement that will take the options object and inject information from it into the rendered HTML.

🔦 Context

Styles must exist as <link> or <style> for initial render and therefore need a hook for rendering on SSR or BTR. The <style> tag may cause issues with current FAST HTML which assumes that {} is a client side binding, we will most likely need to update this syntax to include $ or some other demarkation.