Pass data to web component (angular 6) inside LWC (Lightning Web Component)

Question

I have Angular 8 app defined as web component and I have Lightning Web Component (LWC) app.

Inside LWC I am trying to pass data into web component through the property of DOM element like

this.template.querySelector('my-custom-element').myCustomProp = {isWork: false}

and it fails. But on visual force page it works fine.

In debug console myCustomProp is available on element in case of using of it in visual force page but not in case with LWC. Seems the reason of fail is Locker Service

Also passing of data as string through setAttribute works fine:

my-custom-element.setAttribute('my-custom-prop', '{isWork: true}');

Who was facing with that problem? Any solution?

Answer 1

Also have faced this problem. This solution:

my-custom-element.setAttribute('my-custom-prop', '{isWork: true}');

works for me. But have to add that my-custom-prop should be named starting with data: data-my-custom-prop otherwise it will not work. The final working version will be:

my-custom-element.setAttribute('data-my-custom-prop', '{isWork: true}');