Definition and usage of a custom element that creates equal spaces between child elements

customisation.css

cx-space {
  --cx-space-gap-small: 2rem;
  --cx-space-gap-default: 2.5rem;
  --cx-space-gap-large: 5rem;
}

cx-spaced.ts

import { LitElement, css, html } from 'lit';
import { property } from 'lit/decorators.js';
import { cx } from '@crux/utils';

export class CruxSpaced extends LitElement {
  @property({ type: String })
  size: string = 'default';

  @property({ type: Boolean })
  vertical: boolean = false;

  static styles = css`
    .space {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      gap: var(--cx-space-gap-default, 1rem);
    }

    .space.small {
      gap: var(--cx-space-gap-small, 0.5rem);
    }

    .space.large {
      gap: var(--cx-space-gap-large, 2rem);
    }

    .space.vertical {
      flex-direction: column;
    }
  `;

  render() {
    const className = cx(
      'space',
      this.size,
      this.vertical ? 'vertical' : '',
    );

    return html`
      <div class=${className}>
        <slot></slot>
      </div>
    `;
  }
}

customElements.define('cx-spaced', CruxSpaced);

declare global {
  interface HTMLElementTagNameMap {
    'cx-spaced': CruxSpaced;
  }
}

usage.ts

import { html, render } from 'lit';
import './cx-spaced';
import './customisation.css';

const root = document.getElementById('root');

render(template(), root);

export function template() {
  return html`
    <cx-space>
      <span>1</span>
      <span>2</span>
    </cx-space>
    
    <cx-space size="large" vertical>
      <span>1</span>
      <span>2</span>
    </cx-space>
    
    <cx-space vertical>
      <span>1</span>
      <span>2</span>
    </cx-space>
  `;
}