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.2shadycss版本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 回答