lit-element: Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'previousSibling' из null

Question

При миграции на lit-element версию 0.6.0.Если я использую

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>

в header части моего документа.У меня следующая ошибка:

Uncaught (in promise) TypeError: Cannot read property 'previousSibling' of null
    at NodePart._commitText (parts.ts:255)
    at NodePart.commit (parts.ts:216)
    at TemplateInstance.update (template-instance.ts:56)
    at NodePart._commitTemplateResult (parts.ts:283)
    at NodePart.commit (parts.ts:220)
    at render (render.ts:48)
    at Function.render (shady-render.ts:160)
    at HTMLElement.update (lit-element.ts:44)
    at HTMLElement._validate (updating-element.ts:600)
    at HTMLElement._invalidate (updating-element.ts:574)

Я не смог отследить, откуда возникла эта ошибка, поскольку стек ошибок огромен и включает много асинхронных вызовов.Также я попытался воспроизвести минимальный пример, но я не смог воспроизвести то же сообщение об ошибке.Следствием этой ошибки является полный сбой при загрузке некоторых пользовательских элементов (до такой степени, что приложение непригодно для использования).

Теперь, если я изменю скрипт заголовка следующим образом:

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

Ошибка просто исчезает ... но теперь в консоли появляется следующее предупреждающее сообщение:

Обнаружена несовместимая версия ShadyCSS.(shady-render.ts: 42)

Пожалуйста, обновите по крайней мере до @ webcomponents / webcomponentsjs @ 2.0.2 и @ webcomponents / shadycss @ 1.3.1.

Это забавносообщение, потому что мой проект уже использует webcomponentsjs версию 2.1.2 и shadycss версию 1.5.2.Помимо этого предупреждающего сообщения, директивы css @apply полностью игнорируются, в результате чего интерфейс не использует никаких свойств flex (я позволю себе представить беспорядок).

Теперь это поведение, которое я действительно не могу понятьхотя я провел целый день, копаясь в документации и прочем.Я призываю вашу помощь.

Answer 1

Существует известная проблема с ShadyCSS, которая была введена в 0.11.3, поэтому она может вызывать проблемы с shady-render.Я думаю, что исправление уже внесено, поэтому оно должно быть решено с помощью 0.11.4

. Если вы используете LitElement, вам, вероятно, следует использовать lit-html версии 0.11.2, то есть то, что использует сам lit-element.В противном случае есть разумная вероятность того, что вы используете две разные версии, что также может объяснить некоторые проблемы.

Я не могу воспроизвести ваши проблемы, хотя: codepen.io/ruphin/pen/qMyMVO?editors=1010

Единственное объяснение, которое я могу придумать, заключается в том, что webcomponents-bundle.js работает, что вызывает использование ShadyRender, что приводит к поломке.Когда вы переключаетесь на webcomponents-loader.js, полизаполнения по какой-то причине не работают, что приводит к тому, что ShadyRender не используется и объясняет, почему вы не получаете сообщение об ошибке, а получаете предупреждения о несовместимом заполнении и не получаете должным образомполи заполненный CSS.Я не знаю, почему это происходит, хотя обе версии polyfill должны работать, хотя я обычно рекомендую использовать -bundle.

Было бы полезно, если бы я знал, в каком браузере / версии вы видите проблему.