import { Meta } from '@storybook/blocks';

<Meta title="Getting Started/Developers/Themes & Customization" />

<h1 className="text-center">Themes & Customization</h1>

If you're new to using Web Components, you'll quickly notice that the traditional way of styling elements with CSS doesn't work with COD components.

For example, this won't work:

```html
<cod-button style="background:red;">button</cod-button>
```

This is a feature of the Shadow DOM: outside styles cannot be applied to content inside the Shadow DOM. Shadow DOM gives us a clean, native way
of encapsulating styles and protects your applications from breaking changes.

The Shadow DOM API provides three solutions to allow intentional inheritance of styles across the Shadow DOM boundary:

- [Shadow DOM slots](https://javascript.info/slots-composition)
- [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties)
- [CSS Parts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_shadow_parts).

## Styling Slotted Elements

Elements in Shadow DOM slots remain in the Light DOM, which means they can be styled with global CSS. This is the most straightforward way to style slotted elements.

```html
<style>
  span {
    color: blue;
  }
</style>
<cod-service-button
  href="https://www.example.com"
  target="_blank"
  rel="noopener noreferrer"
>
  <!-- Colored blue because these are slotted elemented. -->
  <span slot="title">Apply for a Job</span>
  <span slot="subtitle"
    >View job postings for the City of Detroit or our partners.</span
  >
</cod-service-button>
```

## Using CSS Custom Properties

See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties for more information.

The CSS custom properties of a component are listed on the component's Documentation page.

## Using CSS Parts

See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_shadow_parts for more information.

The CSS parts of a component are listed on the component's Documentation page.