> Markdown version of [Styling](https://vaadin.com/docs/latest/flow/component-internals/templates/styling-templates). Section index: [llms.txt](https://vaadin.com/docs/latest/flow/llms.txt)

# Styling Templates

Since client-side templates are Web Components, their content is inside the shadow DOM. By design, the shadow DOM defines a local style scope that’s isolated from global styles. See [Shadow DOM Styling](https://vaadin.com/docs/latest/styling/advanced/shadow-dom-styling.md) for more information.

You can add component-specific scoped styles directly in the static `styles` template property.

`my-view.ts`

```javascript
import { css, html, LitElement } from 'lit';

class MyView extends LitElement {

  static get styles() {
    return css`
      :host {
        /* Styles for the <my-view> host element */
        display: block;
      }

      .my-view-title {
        font-weight: bold;
        border-bottom: 1px solid gray;
      }
    `;
  }

  render() {
    return html`
      <h2 class="my-view-title">My view title</h2>
    `;
  }
}

customElements.define('my-view', MyView);
```

To have your [Application Theme](https://vaadin.com/docs/latest/styling/application-theme.md) applied inside a client-side template, use the `applyTheme()` utility function, like this:

`my-view.ts`

```javascript
import { css, html, LitElement } from 'lit';
// tag::snippet[]
import { applyTheme } from 'Frontend/generated/theme';
// end::snippet[]

class MyView extends LitElement {

  // tag::snippet[]
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }
  // end::snippet[]

  render() {
    return html`
      <h2 class="my-view-title">My view title</h2>
    `;
  }
}

customElements.define('my-view', MyView);
```

If you want to avoid using shadow DOM in your template, create it like this instead:

```typescript
import { css, html, LitElement } from 'lit';

class MyView extends LitElement {
  // tag::snippet[]
  protected override createRenderRoot() {
    return this;
  }
  // end::snippet[]

  render() {
    return html`
      <h2 class="my-view-title">My view title</h2>
    `;
  }
}

customElements.define('my-view', MyView);
```

A template without shadow DOM allows your application theme to affect the elements inside the template.

`42AE001F-6D1F-456E-B072-27B883C19920`