Minze

Styling

By default, any CSS defined in the css property is scoped to the component and is not affecting the global CSS. Global CSS doesn't affect the styling of the component either. However, there are ways to make the component's styling overwritable by the global CSS.

TIP

By default, all typography properties are inherited from the global CSS, like color, font-family, etc.

WARNING

Custom elements are display: inline by default, in Minze however they are initially set to display: block. To overwrite this behavior use the :host selector.

Internal

Components can be styled internally without affecting the CSS outside the component.

CSS

The css property is used to define the scoped CSS for the component. It expects a function with a return value of type string.

Example

import Minze, { MinzeElement } from 'minze'

class MyElement extends MinzeElement {
  color = 'red'

  html = () => `<div>Hello Minze!</div>`

  css = () => `
    div {
      background: ${this.color};
    }
  `
}

Minze.defineAll([MyElement])

<my-element>Hello Minze!</my-element>

Conditional Styling

You can use conditional operators (Ternary, Logical OR, Nullish coalescing, ...) inside the css property to conditionally apply styling.

Example

import Minze, { MinzeElement } from 'minze'

class MyElement extends MinzeElement {
  isActive = true
  color = 'rgb(255 255 255)'

  html = () => `
    <div>Hello Minze!</div>
  `

  css = () => `
    div {
      background: ${this.isActive ? 'rgb(55 245 220)' : 'transparent'};
      color: ${this.color || 'rgb(0 0 0)'};
      border-color: ${this.color ?? 'rgb(0 0 0)'};
    }
  `
}

Minze.defineAll([MyElement])

<my-element></my-element>

Host

The :host pseudo-class selector styles the component itself, and not the content inside its template.

Example

import Minze, { MinzeElement } from 'minze'

class MyElement extends MinzeElement {
  html = () => `Hello Minze!`

  css = () => `
    :host {
      background: red;
    }

    :host(:hover) {
      background: blue;
    }

    :host(:active) {
      background: green;
    }
  `
}

Minze.defineAll([MyElement])

<my-element>Hello Minze!</my-element>

Host Context

The :host-context pseudo-class selector applies styles conditionally based on parent elements.

Example

import Minze, { MinzeElement } from 'minze'

class MyElement extends MinzeElement {
  html = () => `<div>Hello Minze!</div>`

  css = () => `
    :host-context(.light) {
      background: white;
      color: black;
    }

    :host-context(.dark) {
      background: black;
      color: white;
    }
  `
}

Minze.defineAll([MyElement])

<div class="light">
  <div>
    <my-element>Hello Minze!</my-element>
  </div>
</div>

<div class="dark">
  <div>
    <my-element>Hello Minze!</my-element>
  </div>
</div>

Slots

The ::slotted pseudo-class selector applies styles to any element that has been placed into a slot.

WARNING

The ::slotted selector only works when used inside the component. Note also that this selector won't select any text nodes placed into a slot, it only targets actual elements.

Example

import Minze, { MinzeElement } from 'minze'

class MyElement extends MinzeElement {
  html = () => `
    <slot name="slot-1"></slot>
    <slot name="slot-2"></slot>
  `

  css = () => `
    ::slotted(*) {
      background: red;
    }

    ::slotted([slot=slot-2]) {
      background: blue;
    }
  `
}

Minze.defineAll([MyElement])

<my-element>
  <div slot="slot-1">Hello Minze!</div>
  <div slot="slot-2">Hello Minze!</div>
</my-element>

External

By default, global CSS doesn't affect the styling of the component. You can however expose certain "style-hooks" that can be accessed from outside the component.

Parts

The part attribute can be accessed outside the component with the ::part pseudo-class selector.

Example

import Minze, { MinzeElement } from 'minze'

class MyElement extends MinzeElement {
  html = () => `
    <div part="my-part">Hello Minze!</div>
  `
}

Minze.defineAll([MyElement])

<my-element>Hello Minze!</my-element>

::part(my-part) {
  background: rgb(55 245 220);
}

Variables

All CSS variables defined inside the component can be externally overwritten.

Example

import Minze, { MinzeElement } from 'minze'

class MyElement extends MinzeElement {
  html = () => `<div>Hello Minze!</div>`

  css = () => `
    :host {
      background: var(--my-color, red);
    }
  `
}

Minze.defineAll([MyElement])

<my-element>Hello Minze!</my-element>

:root {
  --my-color: blue;
}