Styling

Learn how to style your components.

Components support styling. At the top level in a component, you can have a <component> tag, a <fieldset> tag, and/or as many <style> tags as you need. All content between style tags gets combined and injected into source at the bottom of the head tag in the HTML (just before the closing </head> tag). Note: CSS altering transformers are applied after components are evaluated so they continue to be effective on components.

<style>
.small{
font-size: 0.875em;
color: #9DACBF;
}
</style>
<style>
body{
background: blue;
}
</style>
<component>
<p class="small">
<slot></slot>
</p>
</component>

Sometimes, you need to guarantee that a particular <style> tag lives on its own and doesn't get merged with the rest. You can do so by marking the style tag as discrete.

<style>
.small{
font-size: 0.875em;
color: #9DACBF;
}
</style>
<style discrete>
body{
background: blue;
}
</style>
<component>
<p class="small">
<slot></slot>
</p>
</component>