lit-element：未捕获（承诺）TypeError：无法读取null的属性“ previousSibling”

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版本。 （黑幕-render.ts：42）

请至少更新到@ webcomponents / webcomponentsjs @ 2.0.2和@ webcomponents / shadycss @ 1.3.1。

这是一条有趣的消息，因为我的项目已经在使用2.1.2版的webcomponentsjs和1.5.2版的shadycss 。 除了此警告消息外，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时，由于某些原因，polyfill无法正常工作，这导致ShadyRender不被使用，并解释了为什么您没有收到错误，但收到不兼容的polyfill警告，并且无法正常使用填充CSS。 我不知道为什么会发生这种情况，尽管我通常建议使用-bundle，但两个版本的polyfill都可以工作。

如果我知道您在哪个浏览器/版本上看到此问题，将会有所帮助。