LitElement 的 Vaadin ts 文件 100% 宽度

Question

我使用 Vaadin LitTemplate。所以我有 .ts file 和 .java file.

现在我想在另一个 Custom-View(LitElement"Standort")

中使用 Custom-View(LitTempalte"Standorte")

那是我的standort-view.ts。我也试过添加width:100% into :host但是我没有工作。

import { LitElement, html, css, customElement } from 'lit-element';
import '@vaadin/vaadin-ordered-layout/src/vaadin-vertical-layout.js';
import '@vaadin/vaadin-ordered-layout/src/vaadin-horizontal-layout.js';
import '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
import '@vaadin/vaadin-button/src/vaadin-button.js';

@customElement('standort-view')
export class StandortView extends LitElement {
  static get styles() {
    return css`
      :host {
          display: block;
          height: 100%;
      }
      `;
  }

  render() {
    return html`
<vaadin-vertical-layout style="width: 100%; height: 100%;">
 <vaadin-text-field label="Straße" placeholder="Placeholder" id="standortstrasse" style="width: 100%;"></vaadin-text-field>
 <vaadin-horizontal-layout theme="spacing" style="width: 100%;">
  <vaadin-text-field label="Ort" placeholder="Placeholder" id="standortort" style="width: 100%;"></vaadin-text-field>
  <vaadin-text-field label="PLZ" placeholder="Placeholder" id="standortplz" style="width: 100%;"></vaadin-text-field>
 </vaadin-horizontal-layout>
 <vaadin-horizontal-layout theme="spacing" style="width: 100%;">
  <vaadin-button id="resetstandort" style="width: 100%;">
    Reset 
  </vaadin-button>
  <vaadin-button theme="primary" id="savestandort" style="width: 100%;">
    Speichern 
  </vaadin-button>
 </vaadin-horizontal-layout>
</vaadin-vertical-layout>
`;
  }

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

如何将“宽度：100%”添加到 Standort-View?

如果我在浏览器中添加它，它看起来就像我想要的...

Answer 1

您没有使用影子 DOM (createRenderRoot() {return this;})，这意味着您定义样式的方式不符合您的预期。

您可以在全局 CSS:

中添加一个 CSS 选择器

standort-view {
 display: block;
 width: 100%;
}

或者，您可以通过删除 createRenderRoot 的覆盖来启用 Shadow DOM。

LitElement 的 Vaadin ts 文件 100% 宽度

Vaadin ts file 100% width for LitElement

vaadin

lit-element

vaadin-flow

vaadin14