Styling component based on shadow DOM class vs :host class or attribute

[yringler]

There are two ways for a webcomponent to style variants.

1. It can check the light dom
2. It can check JS properties, and use them to add classes to the shadow DOM, and style based on those.

Looking at the shoelace button.component.ts as an example, we see

  /* Primary */
  .button--standard.button--primary {
    background-color: var(--sl-color-primary-600);
    border-color: var(--sl-color-primary-600);
    color: var(--sl-color-neutral-0);
  }

instead of something like

  /* Primary */
  :host(variant=primary) .button--primary {
    background-color: var(--sl-color-primary-600);
    border-color: var(--sl-color-primary-600);
    color: var(--sl-color-neutral-0);
  }

IIRC, adobe spectrum uses the host style.

Can you share your motivations and reasoning behind the style that you choose?