Switching between multiple templates leaks css

[joan-sf]

Description

When having multiple templates with different css and switching between them, the latest one to apply is the one that ends up winning. Switching back to the first template keeps the css of the previous one.

Steps to Reproduce

1. Generate a new project with

$ npm init lwr
$ npm install
$ npm run start

2. Create a component with two templates, as described on the docs
3. Add the respective route to lwr.config.json
4. Enter the component and switch templates

Expected Results

Css is scoped to the respective html template

Actual Results

Css from different template is being applied

Browsers Affected

Chrome 100.0, Safari 15.4, Firefox 98.0.2

Version

• LWC: 2.5.8
• LWR: 0.6.4

Additional context/Screenshots
This happens if you select either Typescript or Javascript project template
It also happens when using the Recipes App
The only place where I couldn't reproduce the issue is on webcomponent.dev

[nolanlawson]

Thanks for reporting. I believe this is a duplicate of #2466.

Currently, replacing template A with template B does not guarantee that template A's styles will be removed from the DOM. For this reason, we recommend developers to use styles that only apply to that particular template, and to not rely on the other template's styles not being present.

We may fix #2466 eventually, but it would be tricky because it could potentially break backwards compatibility, if developers are relying on the styles not being removed.

Please let me know if I've diagnosed the problem correctly, and reopen this issue if I'm wrong. Thanks!

[joan-sf]

Thx for the ultra quick response. I totally understand the potential break on backwards compatibility, my suggestion would be to remove the multiple template example from the docs, or at least mention that css is not completely scoped from one template to the other

[nolanlawson]

Yeah that example in the docs only works in old versions of LWC, or in non-Chrome browers, due to some subtleties in how styles are rendered. (Constructable stylesheets versus style tags.) It should probably be changed.

[nolanlawson]

@joan-sf FWIW, the CSS does not "leak" between templates in a multi-template component if you use scoped styles. So that is one potential workaround.

[joan-sf]

Oh nice, gonna do some reading on light dom to understand exactly how scoped styles may solve the issue and check with the team if it's something we should consider using. Either way, thank you so much for the update and suggestion!

[nolanlawson]

@joan-sf Scoped styles can be used in either light DOM or shadow DOM. 🙂 In either case, they avoid the multi-template CSS leakage problem (#2797 (comment)).

[nolanlawson]

@joan-sf The documentation has been updated to recommend scoped styles for this use case, and the demo is fixed. Thank you for raising this issue. 🙂

[joan-sf]

Glad to help!
And thank you for the quick responses and detail suggestion on how to solve the issue