LitElement 100%宽度的Vaadin文件

Question

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

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

​

那是我的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。