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>

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>

Global styles

If you want to inject some global styles whenever your Enhance Element is used, you can use a style tag with the scope="global" attribute.

<style scope="global">
  body {
    overflow-y: hidden;
  }
</style>

Community Resources

GitHub

Visit Enhance on GitHub.

Discord

Join our Discord server to chat about development and get help from the community.

Mastodon

Follow Enhance in the Fediverse. We're huge fans of the IndieWeb!