How to Style the components

[lpoulter]

I couldn't find any documentation about how to add custom style to the components. Are we able to add custom classes to components?

[jorenbroekema]

Hi!

The main idea about Lion is that you should extend the component classes.

There's an example here:
https://lion-web-components.netlify.app/?path=/docs/intro-announcement--page#-extend-the-components

Essentially we don't really expect people to use for example lion-input directly. You can, but the styling options will be limited, as we don't currently do anything special for CSS features like ::theme or ::part.

The recommended way to use lion, in another example:

import { css } from '@lion/core';
import { LionInput } from '@lion/input';

export class FooInput extends LionInput {
  static get styles() {
    return [
      super.styles,
      css`
        /* your styles here */
      `
    ];
  }
}

import { FooInput } from './src/FooInput.js';

customElements.define('foo-input', FooInput);

I don't really think we will be doing much with ::theme or ::part, I would expect this to happen more on the side of the design system that extends from lion, so that your app developers using your design system can use variations, themes or overrides.
When you extend lion, the proper way is to extend the component classes. In your own design system, ::theme or ::part may be very appropriate however :)

[jorenbroekema]

I just merged a README.md update to make this a little more clear and prominent :)

[abdonrd]

@jorenbroekema I get this TS error:

[lpoulter]

Thanks for the answer. Is there also a way to add extend and add class's to the elements? One way I've found is to not extend and instead render the element. Is this approach ok or is there a better way? For context I'm looking to use the Lion classes in our own design system.

  render() {
    const classes = `my-input--${this.size}`;

    return html`
      <lion-input
        label="Query Name"
        name="firstName"
        class="${classes}"
      ></lion-input>
    `;
  }

[jorenbroekema]

Yep that's perfectly fine but there are some limitations/drawbacks to not extending the component class and defining your own element:

• CSS overriding, you can't really properly override or clear the CSS of lion-input without overriding static get styles() in an extension class. So instead you may find yourself battling in CSS specificity wars with the few functional styles that lion has set on lion-input, and this may get annoying.
• Changing behaviour of the input as specified through protected methods. _inputGroupInputTemplate is an example of such a method, in an extension class you can override this for example if you want your validation feedback to show on top of the input element, instead of below the input element.
• Adding additional behaviour on top of the input element. Perhaps you have a magic icon as a prefix to your input that starts moving around when you hover the input. It's probably nicer to code that behaviour in an extension class and encapsulate the logic there instead of putting it in a wrapper component. It also saves you an extra DOM element and shadow boundary, since you wouldn't need the wrapper component

Quite often, you may find that simply importing and using a lion component directly, and applying minimal styles, is all you need. In fact, in a pet project I did the same thing because I just needed switch component with very minimal styles. That's totally fine :)

But for a full-blown design system built on top of lion, it's probably better to have a consistent convention: always extend the lion class --> your own class --> define as custom element. Because it's quite likely that at some point, you need the fine-grained control of extending the class, and at a certain point you probably realise it's just simpler to "always extend" as a convention, for consistency and predictability in your codebase.

[lpoulter]

That's a great answer, thanks again.