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

Question

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

如果undefined从 render 返回LitElement的方法|在组件的第一次渲染期间，然后返回带有一些 css 类的 lit-html TemplateResult(样式在 styles 静态 getter 方法中定义)，这些样式不会应用。

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

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

如果 render 方法返回 undefined第一次渲染后，<style>标签在影子 DOM 中丢失，并且即使在下一次渲染调用中使用 lit-html TemplateResult 也从未添加。

对于 Chrome 它工作正常。该问题在 Safari 和 Firefox 中重现。

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

Answer 1

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

render() {
   return html``;
}

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