this.$slots.default returns undefined under chrome

[aniolekx]

I have have developed few component which works fine under Firefox and IE11, but do not work under Chrome.

After debugging I found that this.$slots.default is undefined under chrome.

Can someone confirm that too?

Mainly i do not do anything special, I have component which has one slot and inside that component I want to access that slot's content and I do it through: this.$slots.default

But only under chrome it returns undefined.

[aniolekx]

I did additional check with that demo component: https://karol-f.github.io/vue-custom-element/#/demos/slots

Works under Firefox (latest), but does not work under Chrome 73 (latest)

[karol-f]

Hi, I can't confirm this. My test with Chrome version 73.0.3683.103:

Can You confirm that you don't have any Adblock or other browser add-on that mess with the page?

Can you provide GitHub or Codesandbox example with hat issue?

[aniolekx]

I did repo with minimal configuration to reproduce issue:

https://github.com/aniolekx/vue-custom-element-chrome-issue

[karol-f]

Hi, thanks for reproduction - I will check it soon.

[aniolekx]

Did you have a chance to look at it?

[karol-f]

@aniolekx Yes, I confirmed weird behaviour in your GitHub repo. I think i should do it in proper way and migrate this library to native slots but it's not so fast. I will definitely keep my eye on this and fix it soon.

[aniolekx]

Thanks Karol, do you think that this issue is partially related to encore or babel? I have checked different babel presets, nothing had helped, and the same issue I have under vuejs/vue-web-component-wrapper.

[aniolekx]

Is there anything that I can do to help resolve that issue?

[karol-f]

Can You describe your use case? What You want to achieve? Maybe there is other way?

[aniolekx]

All I want to do is have compatibility with IE11 and use new features from JavaScript, and all I am using to archive that is Babel and Webpack Encore, do you have any clue why it doesn't work under Chrome?

[aniolekx]

I am debugging this since morning and seems that thee is a problem with this line:
const elementOriginalChildren = element.cloneNode(true).childNodes; // clone hack due to IE compatibility
seems that that object "element" under chrome do not have access to innerHtml, and is different under chrome and firefox, I dont know why. It is already different when it is passed to method: createVueInstance. Under Chrome element.innerHTML is not returning anything.

[aniolekx]

Seems that under Chrome there is slight delay for innerHTML, I am looking now for correct event to handle this...

[aniolekx]

I have resolved this issue for my use case., I added additional option: slot, and if it is true I am attaching shadow with template that contain slot, and then I can use slot event: 'slotchange' to check if slot was populated and then safely execute createVueInstance.

I do not know if this is the best possible solution but at the moment seems that it works.

I also tried to somehow detect that innerHTML is ready for element, but no luck, I do not know how to delay code execution until it is ready.

[karol-f]

Good to know, I will try to refactor slots anyway. Thanks!

[aniolekx]

Hej Karol, slots unfortunately didn't help under Chrome, somehow chrome is processing DOM slower or differently?

I have rally heavy grid, and slots approach with that slotchange event rendered it, but only like 200 rows of over 2k, rest probably was not yet loaded to innerHTML of that element.

I had to find a way to delay execution until innerHTML (all child nodes) is loaded, and I found something which works.

Mainly I am delaying execution until next sibling of parent of my element is available in DOM (I assume that such element always exists), I tried different DOM events, observers, watchers etc, but mainly these works when DOM is ready, and I needed something when DOM is still not ready.

[aniolekx]

https://gist.github.com/aniolekx/75d6fadde76bdbdb5eb8b9fc67f36264

I have spent again many hours on this issue trying to fix it. Seems that this what I have added on bottom works.

I am always attaching my JS in header part of my app, so web components are running when DOM is not ready yet. Somehow DOM is rendered much slower under Chrome comparing to Firefox. Under Chrome that interval which I have added is always able to finish his work (for heavy slots), under Firefox DOMContentLoaded is always first.

[aniolekx]

do you have any suggestions / better solutions?