Стили не применяются к LitElement в Safari / Firefox

Question

Если undefined возвращается из render метода LitElement во время первого рендеринга компонента, а затем возвращается lit-html TemplateResult с некоторыми классами CSS (стили определены в styles статическом методе получения), этистили не применяются.

Существует простой JSFiddle для воспроизведения этой проблемы.

Если сделатьМетод возвращает lit-html TemplateResult после первого рендеринга компонента, затем в теневом DOM существует тег <style>.

Если метод рендеринга возвращает undefined после первого рендеринга, тег <style> пропускается в теневом DOM и никогда не добавляется, даже если lit-html TemplateResult при следующем вызове рендеринга.

Для Chrome работает нормально. Выпуск воспроизводится для Safari и Firefox .

Answer 1

Существует три отдельных случая того, как стиль обрабатывается на основе поддержки Shadow DOM через исходный код:

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

Именно поэтому он может вести себя по-разному в разных браузерах.

LitElement имеетметод adoptStyles(). Он применяет стилизацию к элементу shadowRoot, используя свойство static get styles.

В вашем примере вы можете вызвать 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

Во всяком случае, я думаю, что вы столкнулись с ошибкой в ​​update методе LitElement.

Это может решить эту проблему: https://github.com/Polymer/lit-element/pull/849

Answer 2

Решение состоит в том, чтобы вы всегда возвращали lit-html TemplateResult из метода рендеринга, даже если он пуст!

render() {
   return html``;
}

Но я не до конца понимаю, почему именно эта проблема возникает? Может кто-нибудь уточнить?