0

在迁移到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属性（我让你想象一下混乱）。

现在这是一种我真的无法理解的行为，即使我花了整整一个下午的时间来研究文档和东西。我召唤你的帮助。

4

1 回答 1

0

0.11.3 中引入的 ShadyCSS 存在一个已知问题，因此可能会导致您的 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 时，polyfills 由于某种原因无法工作，这会导致 ShadyRender 无法使用，并解释了为什么您没有收到错误，但收到了不兼容的 polyfill 警告，并且没有正确获得填充 CSS。我不知道为什么会这样，虽然我通常建议使用 -bundle.

如果我知道您遇到问题的浏览器/版本会有所帮助。

于 2018-09-15T00:49:54.510 回答