Style your components

Introduction

By definition components are reusable pieces of code. Most of times, when you create a component you also have a CSS code to specifically style that component. With Wompo, you have the following different ways to style your components:

1. Classic CSS file
2. Built-in CSS "modules"
3. Mix of the two above (usually for Shadowed Elements)
4. Inline styles

CSS file

Using a CSS file to style your components is the classic and easier way to add some creativity in your page. By default, Wompo components are not inside a Shadow DOM, so you don't have to worry about how to make your CSS go through the unbreakable wall of Shadow DOM. With this approach, you simply create a CSS file and add the respective classes in your component.

.container {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

function Component() {
  return html`<div class="container"></div>`;
}

CSS Modules

The second option, which is actually the best choice, is to use the built-in CSS Modules. By default every Component has the cssModule option enabled, so what you will have to do is simply add your CSS inside the .css property of the functional Component. This property is a simple string containing your CSS structure, and will generate a style element will be generated (only once) and attached for every component instance.
Wompo will automatically replace all the found class names with a more specific one (based on the name of the component, which is unique) and will put the generated class names in the styles prop of the component. This prop is an object having as keys the original class names found in the CSS, and as values the corresponding unique generated class names.
This option can be ideal for both "normal" and "shadow" components.

function Component({ styles: s }) {
  // s.container will have "component-womp__container" as a value.
  return html`<div class=${s.container}>...</div>`;
}
Component.css = `
  /* This class will be replaced with "component-womp__container" */
  .container {
    background-color: #333;
    color: #fff;
    padding: 10px;
  }
`;

As said, the generated class names are not random. This allows you to still easily override a component's styles with a global CSS. If you use the class "button" inside a component whose name is "simple-counter", the generated class name will simply be:

// [component_name]__[class_name]
'simple-counter__button';

Shadow elements

Another option is to use the .css property in your functional component to generate it's specific CSS, but without generating unique class names. This is the ideal option if you enable the shadow property on the component. To allow this you have to first disable the cssModule option.

function App() {
  return html`<${GreetingsComponent} />`;
}
App.css = `
  .container {
    background-color: #333;
    color: #fff;
    padding: 10px;
  }
`;
defineWompo(App, { cssModule: false, shadow: true });

Inline styles

Last but not least, you can style your elements with inline styles. You can do that in two ways:

1. Using a string with the styles (default)
2. Using an object to describe the CSS Properties

If you choose the second option, the object will be a CSSStyleDeclaration object, so you should replace the name of the property you want to style in camelCase (e.g. z-index = zIndex; background-color = backgroundColor).
Example:

function Component({ styles: s }) {
  const badgeStyle = {
    position: 'absolute',
    top: -10,
    left: -10,
    width: 100,
    height: 100,
    backgroundColor: '#573EF6',
  };

  return html`
    <div style="position:relative">
      <span style=${badgeStyle}></span>
    </div>
  `;
}