Element Styles

Element styles are for specific styles that can’t be easily achieved with utility classes. This approach gives developers the convenience of colocating an element’s styles with its markup. These styles are also automatically scoped to the element in which they’re defined.

Locally scoped styling

Adding a <style> tag to your Single File Component’s HTML will scope those styles to that element. This is achieved by automatically hoisting those styles to the document’s <head>, with your custom element’s name inserted as an initial selector for each rule block.

export default function MyHeader({ html }) { 
  return html`
    <style>
      h1 { color: Crimson; }
    </style>

    <h1>My Web App</h1>
  `
}

Authoring the above <my-header> element will result in the following CSS in your document’s inline stylesheet:

<head>
  <!-- ... -->
  <style>
    my-header h1 { color: Crimson; }
  </style>
</head>

🦾

Read more about style transforms →

Element pseudo classes

Enhance projects come preconfigured with a styling system that lets you use pseudo classes like :host and ::slotted(). These pseudo classes give you the ability to style the outer custom element tag as well as slotted elements.

<style>
  :host {
    display: block;
    background-color: RebeccaPurple;
    transition: background-color 2s;
  }
  :host:hover {
    background-color: PaleVioletRed;
  }

  ::slotted(*) {
    color: PapayaWhip;
  }
</style>

Custom properties

Custom properties generated by Enhance’s modular scales (as well as any custom properties declared in your configuration) can be used within element styles as well.

<style>
  :host {
    background: var(--my-custom-gradient);
    font-size: var(--text1);
    margin-block: var(--space4);
    padding: var(--space3);
  }
</style>

Enhance Docs

Element Styles

Locally scoped styling

Element pseudo classes

Custom properties