Vaadin + LitElement – 来自`get style()` 的样式没有得到应用
我有一个简单的 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>
<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()方法应该允许我向组件添加样式,但我在那里添加的任何内容似乎都没有得到应用。甚至* { ... }应该影响所有元素的选择器似乎都没有做任何事情。
回答
问题是createRenderRoot()方法。如果禁用 shadow root,则无需在组件实现中封装样式 - 您可以使用全局 CSS。如果要封装样式,请删除createRenderRoot覆盖并static get styles()应用规则。
THE END
二维码