css - Vaadin + LitElement - 来自`get styles()`的样式没有被应用
问题描述
我有一个简单的 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()
方法应该允许我向组件添加样式,但我在那里添加的任何内容似乎都没有被应用。甚至* { ... }
应该影响所有元素的选择器似乎也没有做任何事情。
解决方案
问题是createRenderRoot()
方法。如果禁用 shadow root,则无需在组件实现中封装样式 - 您可以使用全局 CSS。如果要封装样式,请删除createRenderRoot
覆盖,static get styles()
规则将被应用。
推荐阅读
- r - 根据 15 分钟数据计算土壤水势的日平均值
- python-3.x - 为什么我得到 AttributeError:'str' 对象没有属性 'UserName'
- postgresql - PostgreSQL 两表约束不能正常工作
- python - 预提交错误:没有名为“pwd”的模块,pylint 失败(examples.code)
- arrays - 如何编辑列表中的每个项目并在 dart 中创建一个新项目
- python - 如何将我的 python discord 机器人的状态更改为流式传输?
- reactjs - React 中的渲染和最佳实践
- python - 更改熊猫数据框中的类别名称
- mysql - 如何按日期和用户返回 AVG
- r - 什么是对象?