Javascript 样式不应用于Safari/Firefox中的LitElement

从2020年1月起更新：应使用

如果在组件的第一次呈现期间从

LitElement

的

render

方法返回

undefined

，然后返回lit html TemplateResult和一些css类（样式在

style

静态getter方法中定义），则不会应用这些样式

有一个简单的方法来重现这个问题

若render方法在第一次呈现组件后返回lit html TemplateResult，则阴影DOM中存在

标记。

如果render方法在第一次渲染后返回

undefined

，则在阴影DOM中会丢失

标记，并且即使在下一次渲染调用中出现lit html TemplateResult，也不会添加该标记。

对于Chrome而言，它工作正常。该问题针对Safari和Firefox再次出现

---

更新：应该用

修复它。解决方案是确保始终从render方法返回lit html TemplateResult，即使它是空的

render（）{
返回html``；
}

---

但我不完全理解为什么会出现这个问题？有人能澄清一下吗？

关于如何通过源代码基于阴影DOM支持处理样式，有三种不同的情况：

(1) shadowRoot polyfilled: use ShadyCSS
(2) shadowRoot.adoptedStyleSheets available: use it.
(3) shadowRoot.adoptedStyleSheets polyfilled: append styles after

这就是为什么它在不同的浏览器中表现不同

LitElement有一个方法

adoptStyles（）

。它使用

static get styles

属性将样式应用于元素shadowRoot

在您的示例中，可以调用

this.adoptStyles（）更改属性后，应正确渲染



无论如何，我认为您在LitElement的
update
方法中遇到了一个bug

这可以解决问题：
确实指定
render
必须返回
TemplateResult
，因此返回
undefined
时的行为可能没有指定。这是正确的。我很好奇为什么它在不同的浏览器中表现得不同。这些浏览器如何处理web组件？@abraham，“不呈现任何内容”部分指定：文本绑定中的未定义值、null和空字符串（“”）都呈现空文本节点。因此，我可以假设这些值是可以接受的。这是lit html文档，没有指定lit元素如何定义其API。如果查看LitElement方法的源代码，可以看到它返回
TemplateResult
或
void
。但在对该方法的评论中，他们说
该方法必须返回一个lit html TemplateResult
。所以这有点矛盾。