Vaadin + LitElement - 来自`get styles()`的样式没有被应用答案

【问题标题】：Vaadin + LitElement - styles from `get styles()` not getting appliedVaadin + LitElement - 来自`get styles()`的样式没有被应用
【发布时间】：2026-02-21 23:30:02
【问题描述】：

我有一个简单的 LitElement 类，我想用一些内部 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;
  }
}

static get styles() 方法应该允许我向组件添加样式，但我在那里添加的任何内容似乎都没有得到应用。甚至应该影响所有元素的 * { ... } 选择器似乎也没有任何作用。

【问题讨论】：

标签： css vaadin lit-element

【解决方案1】：

问题在于createRenderRoot() 方法。如果禁用 shadow root，则无需在组件实现中封装样式 - 您可以使用全局 CSS。如果您想封装样式，请移除 createRenderRoot 覆盖，然后将应用 static get styles() 规则。

【讨论】：