样式不适用于 Safari/Firefox 中的 LitElement

Question

2020 年 1 月更新：应该使用https://github.com/Polymer/lit-element/pull/712进行修复

如果在组件的第一次渲染期间从方法undefined返回，然后与一些 css 类一起返回 lit-html TemplateResult（样式在静态 getter 方法中定义），则不会应用这些样式。renderLitElementstyles

有一个简单的JSFiddle可以重现此问题。

如果渲染方法在组件第一次渲染后返回lit-html TemplateResult，则<style>标签存在于shadow DOM中。

如果渲染方法undefined在第一次渲染后返回，<style>则标签在 Shadow DOM 中丢失，并且永远不会添加，即使在下一次渲染调用中 lit-html TemplateResult 也是如此。

对于Chrome来说它工作得很好。Safari和Firefox会重现该问题。

更新：应该用https://github.com/Polymer/lit-element/pull/712修复

Answer 1

解决方案是确保您始终从 render 方法返回 lit-html TemplateResult，即使它是空的！

render() {
   return html``;
}

但我不太明白到底为什么会出现这个问题？有人可以澄清一下吗？