CODEWITHSUNDEEP
cssvaadinlit-element
ollitietavainen
ollitietavainen

Reputation: 4275

Vaadin + LitElement - styles from `get styles()` not getting applied

I have a trivial LitElement class that I want to style with some internal CSS:

import {LitElement, html, css, customElement, property} from 'lit-element';


@customElement('address-card')
export class AddressCard extends LitElement {

  @property()
  streetAddress?: string;

  @property()
  postalCode?: string;

  @property()
  city?: string;


  static get styles() {
    return css`
      .address { border: 1px dashed gray; }
      `;
  }

  render() {
    return html`
    <div class="address">  
      <div>${this.streetAddress}</div> 
      <div>${this.postalCode} ${this.city}</div>
    </div>
    `;

  // Remove this method to render the contents of this view inside Shadow DOM
  createRenderRoot() {
    return this;
  }
}

The static get styles() method should allow me to add styles to the component, but nothing I add there seems to get applied. Not even a * { ... } selector, which should affect all elements, seems to do anything.

Upvotes: 3

Views: 501

Answers (1)

ollitietavainen
ollitietavainen

Reputation: 4275

The problem is the createRenderRoot() method. If you disable shadow root, there's no need to encapsulate styles inside the component implementation - you can use global CSS. If you want to encapsulate styles, remove the createRenderRoot override and the static get styles() rules will get applied.

Upvotes: 7

Related Questions