Leaflet no longer works with LWS

[AllanOricil]

Description

This bug is caused when enabling Lightning Web Security (LWS).

In the video below, you can see that after enabling LWS, clearing the cache and reloading the screen, the semi circles stopped updating correctly

https://user-images.githubusercontent.com/55927613/205337972-3040bd77-c528-4087-902f-1ff164eaa7ab.mov

Steps to Reproduce

1. create a component that uses the lwc:dom="manual" directive to render a leaftlet map with some markers https://leafletjs.com/
2. ensure it works without a problem when LWS is disabled
3. turn on LWS and check that it breaks leaflet js
4. conclude it is a LWS bug

In this repo there is a simple sfdx project which you can use to debug the problem:

https://github.com/AllanOricil/salesforce-leaflet-bug

Use the branch called "no_plugins". I created it to show that the problem is happening in the leaflet core and has nothing to do with the plugins we use to draw semi-circles.

Expected Results

LWS should not break Leaflet. Custom shapes (circle, semi-circle, triangle...) should follow map transformations caused by user Inputs.

Actual Results

LWS breaks Leaflet. Custom shapes are no longer following map transformations caused by user Inputs.

Browsers Affected

It does not matter. Tested on chromium based browsers.

Version

[AllanOricil]

@manuel-jasso @rwaldron

Could you help me to understand why this happens?

Because of this bug, I just had an idea for a product you could create. I believe Salesforce should create a tool that developers can use to determine which external libraries are compatible with LWS. Some type of auditing tool, maybe? I believe this tool would be feasible because LWS is a set of hardcoded rules that enforces security in lwc. You could maybe create a page where customers can find a list of external libraries that were tested and are compatible with LWS. Or just say "your external js won't work if it has X Y and Z". But ideally LWS should just not break anything.

[AllanOricil]

One of the maintainers of Leaflet gave me a hint of what he thinks that LWS does to leaflet. I just don't have the skills to find exactly what is happening.

https://github.com/Leaflet/Leaflet/issues/8706

[caridy]

This is going to be hard to figure... it looks like no errors are emitted, and the issue is positional. As of today, LWS does not apply positional restrictions of any kind. My hunch of this one is that it is either:

a) the virtualization membrane that is causing some values to not get updated on time. probably related to event expandos or something like that. b) the elm.shadowRoot blockage (less likely, but possible that they are not able to calcular the actual position of an element, but its parent)

But without debugging this, it is going to be difficult.

[AllanOricil]

I also believe it is related to event propagation because the circles are updated only after releasing the mouse when LWS is enabled.

[AllanOricil]

@caridy I built an vue+leaflet app, then loaded it using lightning-container , enabled LWS, cleared my cache and did a hard reload, and the bug was gone

https://user-images.githubusercontent.com/55927613/206706864-47fc4b3d-ce1a-4a35-af57-81ca59be0c7f.mov

[caridy]

Yeah, that doesn't count though! That's just an iframe running your own vue+leaflet application in isolation inside that iframe, LWS doesn't have a saying in that case.