Multiple Off-Platform LWC's on one page

[ReichPhilipp]

Hey team,

I have been working on the problem that I want to remove a LWC from the DOM and then add another LWC.
This is causing me some problems with the syntheticShadowDom. In the screenshot you can see that the previous component is used when searching for the parentNode.

Idea is to:
load LWC1 -> Do something -> Unload LWC1 -> load LWC2 -> Do Something -> Unload LWC2 -> ...

Projectsetup:

i try to integrate the Off-Platform LWC's in an angular application. which works fine for single LWC.

Remove the LWC from DOM doesnt work. Looks like that the synthetic shadowdom is still there. How can i remove a LWC from a page?

I am quite desperate and have no further ideas

Thanks

Kind regards
Philipp

[nolanlawson]

Hi @ReichPhilipp, thanks for reaching out. A few suggestions:

1. Could you create a minimal repro of your issue using https://playground.lwc.dev ? You can add import '@lwc/synthetic-shadow' to the top of src/main.js to add synthetic shadow to the page.
2. If this is something specific to the Lightning Platform (Lightning Web Security, etc.) then I would recommend opening a Salesforce Stack Exchange question or a Salesforce case. In this repo, we can only resolve issues with the LWC open-source JavaScript framework.

Based on the description, it is not clear to me what the issue is, but I am suspecting that it may be related to Angular and the usage of Zone.js based on the stacktrace.

[ReichPhilipp]

Thanks a lot for the answer. ❤️

i already added the @lwc/synthetic-shadow. it is part of the ./src/index.js.

i also had the feeling/idea regarding zone.js. i created a minimal version of all. That's what i tested:

• downloaded the newest build-repo from our SalesForce instance
• built the ExampleApp
• copied the app-***.js into a different folger
• duplicated the example app and renames everything to typeSecondExample...
• built the second example app
• used both app in the index.html
• same issue

from my point of view it's a minimal implementation for off-platform LWC's . :)

that's my package.json for the minimal project

[nolanlawson]

Are you loading two copies of LWC on the same page? The error is thrown here:

lwc/packages/@lwc/synthetic-shadow/src/faux-shadow/shadow-root.ts

Lines 78 to 80 in 0574343

	if (isUndefined(record)) {
	throw new TypeError();
	}

...and I'm not sure how this is possible otherwise.

Can you share your minimal repro?

[ReichPhilipp]

Mini Repo

i created a minimal version of the LWC-Build-Repo.

Hopefully it helps...

i will delete this repo in the future or will explain a workaround/solution there. depends ;)

[nolanlawson]

@ReichPhilipp I'm sorry, but I don't understand the repro steps. Could you please provide a repro and the set of Bash commands required to get the working repro up and running? Or else use something like stackblitz.com ?

[ReichPhilipp]

I updated the description..

Thank you for your commitment

[nolanlawson]

I'm sorry, I'm still completely lost reading the directions. If this is an OmniScript-specific issue, then I would recommend opening a Salesforce case.

[nolanlawson]

BTW if you are willing to migrate to native shadow DOM then that may also resolve your issue.

[ReichPhilipp]

we created a case today.

i tried it to migrate to the native shadow DOM. same issue 😅