Day 28: custom properties and web components

We already know that we can encapsulate styles within a web component and we know that web components inherit styles. Another interesting feature of web components in terms of CSS is that custom properties used in a web component can be modified from the outside.

Let’s take this basic alert component.

Please confirm your e-mail address by clicking the link in the e-mail we just sent you.

class Alert extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    
    const styles = document.createElement('style');
    styles.textContent = `
      div {
        background-color: rgb(136 177 255 / 0.5);
        color: rgb(0 0 0);
        font-weight: bold;
        padding: 1rem;
      }
    `

    const content = document.createElement('div');
    content.innerHTML = `
      <slot></slot>
    `
    
    this.shadowRoot.append(styles)
    this.shadowRoot.append(content)
  }
}

customElements.define('matuzo-alert', Alert);

<matuzo-alert>
  Please confirm your e-mail address by clicking the link in the e-mail we just sent you.
</matuzo-alert>

Now, let’s say we want to reuse this component, but convey a different importance visually. We could add attributes (props) for styling to the web component.

<matuzo-alert type="error">
  The amount must be a value between 1 and 16.
</matuzo-alert>

styles.textContent = `
  div {
    background-color: rgb(136 177 255 / 0.5);
    color: rgb(0 0 0);
    font-weight: bold;
    padding: 1rem;
  }

  host([type="error"]) div {
    …
  }
`

This works and it’s also sometimes the preferred way, but we could also open the component up by using custom properties.

const styles = document.createElement('style');
styles.textContent = `
  div {
    background-color: var(--alert-bg, rgb(136 177 255 / 0.5));
    color: var(--alert-color, rgb(0 0 0));
    font-weight: bold;
    padding: var(--alert-spacing, 1rem);
  }
`

What’s happening here is that we set the background-color, color, and padding to a custom property. If the custom property isn’t defined, it falls back to default value. The web component still looks the same, but we can now change its styling according to our needs by modifying custom properties without touching the component.

Default

Please confirm your e-mail address by clicking the link in the e-mail we just sent you.

<matuzo-alert>
  Please confirm your e-mail address by clicking the link in the e-mail we just sent you.
</matuzo-alert>

Error

The amount must be a value between 1 and 16.

.error {
  --alert-bg: rgb(255 119 119);
  --alert-spacing: 2rem;
}

<matuzo-alert class="error">
  The amount must be a value between 1 and 16.
</matuzo-alert>

Success

Settings saved successfully.

.success {
  --alert-bg: rgb(39 149 39);
  --alert-color: rgb(255 255 255);
}

<matuzo-alert class="success">
  The amount must be a value between 1 and 16.
</matuzo-alert>