样式未应用于 Safari/Firefox 中的 LitElement

Question

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

修复

如果 undefined 在组件的第一次渲染期间从 LitElement 的 render 方法返回，然后 lit-html TemplateResult 返回一些 css 类（样式定义在stylesstatic getter方法中），这些样式没有应用。

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

如果渲染方法 returns lit-html TemplateResult 在第一次渲染组件之后，那么 <style> 标记存在于阴影 DOM 中。

如果渲染方法 returns undefined 在第一次渲染后，<style> 标签在阴影 DOM 中丢失并且即使点亮 - html TemplateResult 也不会添加在下一个渲染调用中。

对于Chrome它工作正常。 Safari 和 Firefox.

重现此问题

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

修复

Answer 1

解决方案是确保您总是 return 从 render 方法中点亮-html TemplateResult，即使它是空的！

render() {
   return html``;
}

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

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

样式未应用于 Safari/Firefox 中的 LitElement

Styles are not applied to the LitElement in Safari/Firefox

javascript

html

css

web-component

lit-element