0

On migration to lit-element version 0.6.0. If I use

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

in the header part of my document. I have the following error :

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)

I couldn't trace where this error came from as the errors stack is huge and involves a lot of asynchronous calls. Also I tried to reproduce a minimal example, but same, I couldn't emulate the same error message. The consequence of this error is a complete failure to load some custom elements (to the point the application is unusable).

Now If I change the header script with this one :

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

The error just vanishes.. but now the following warning message appears in the console:

Incompatible ShadyCSS version detected. (shady-render.ts:42)

Please update to at least @webcomponents/webcomponentsjs@2.0.2 and@webcomponents/shadycss@1.3.1.

It's a funny message because my project is using webcomponentsjs version 2.1.2 and shadycss version 1.5.2 already. Besides this warning message the css directives @apply are completely ignored resulting in an interface not using any flex properties (I let you imagine the mess).

Now this is a behavior I really can't understand even though I spent full afternoon digging into documentation and stuff. I summon your help.

Community
  • 1
  • 1
vdegenne
  • 12,272
  • 14
  • 80
  • 106

1 Answers1

0

There is a known issue with ShadyCSS that was introduced in 0.11.3, so that may be causing your problems with shady-render. I think the fix is already in so it should be resolved with 0.11.4

If you are using LitElement, you should probably be using lit-html version 0.11.2, which is what lit-element itself uses. Otherwise there's a reasonable chance that you are using two different versions, which may also explain some problems.

I can't reproduce your issues though: codepen.io/ruphin/pen/qMyMVO?editors=1010

The only explanation I can come up with is that webcomponents-bundle.js works, which triggers ShadyRender to be used, which breaks. When you switch to webcomponents-loader.js the polyfills don't work for some reason, which causes ShadyRender to not be used and explains why you don't get the error, but get the incompatible polyfill warnings, and don't get properly polyfilled CSS. I don't know why this is happening though, both versions of the polyfill should work, although I generally recommend using -bundle.

It would help if I knew on what browser/version you are seeing the problem.

ruphin
  • 1