Styling

Learn how to style your components.

Legacy Components
You are reading the legacy components documentation. Please refer to the new documentation for the latest 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>
Previous ArticleNext Article