Styling

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>