问题描述
我使用 Vaadin $(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 1) {
$(".header").addClass("fixed-header");
$('.asnapaday-logo').fadeOut(500,function() {
$('.asnapaday-logo').attr("src","/wp-content/uploads/2021/06/20210103_ASnapADay_Profiel_Foto.jpg");
$('.asnapaday-logo').fadeIn(500);
});
} else if (scroll < 1) {
$(".header").removeClass("fixed-header");
$('.asnapaday-logo').fadeOut(500,"/wp-content/uploads/2021/06/Laag_4.svg");
$('.asnapaday-logo').fadeIn(500);
});
}
});
。所以我有我的 LitTemplate 和 .ts file
现在我想在另一个 .java file.
custom-view(LitTempalte"Standorte")
那是我的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;
}
}
？
如果我在浏览器中添加它，它看起来像我想要的...
解决方法
您没有使用 shadow DOM (createRenderRoot() {return this;})，这意味着您定义样式的方式不符合您的预期。
您可以在全局 CSS 中添加 CSS 选择器：
standort-view {
display: block;
width: 100%;
}
或者，您可以通过删除 createRenderRoot 的覆盖来启用 Shadow DOM。