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

Question

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

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

如果第一次渲染组件后render方法返回lit-html TemplateResult，则LitElement标签存在于影子DOM中。

如果渲染方法在第一次渲染后返回styles，则阴影DOM中将丢失<style>标签，即使在下一个渲染调用中使用lit-html TemplateResult，也不会添加。

对于 Chrome ，它可以正常运行。此问题在 Safari 和 Firefox 中再现。

Answer 1

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

undefined

但是我不完全理解为什么会出现此问题？有人可以澄清吗？

Answer 2

在以下三种情况下，如何通过源代码基于Shadow 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();，它应该正确呈现。

https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets

https://github.com/Polymer/lit-html/blob/master/src/lib/shady-render.ts#L127

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

这可以解决：https://github.com/Polymer/lit-element/pull/849