fix(@angular/build): workaround Vite CSS ShadowDOM hot replacement #28780
Conversation
When using the development server with the application builder (default for new projects), Angular components using ShadowDOM view encapsulation will now cause a full page reload. This ensures that these components styles are correctly updated during watch mode. Vite's CSS hot replacement client code currently does not support searching and replacing `<link>` elements inside shadow roots. When support is available within Vite, an HMR based update for ShadowDOM components can be supported as other view encapsulation modes are now.
clydin
added
action: review
| const trackingId = componentId || shadow; | ||
| if (usedIds === undefined) { | ||
| usedComponentStyles.set(pathname, new Set([componentId])); | ||
| usedComponentStyles.set(pathname, new Set([trackingId])); |
There was a problem hiding this comment.
It might be clearer if we structure the data differently rather than using true/false/string, as a object to make it easier to follow:
{
encapsulation?: string;
componentId?: string;
}I can foresee that, in the future, this can be a bit confusing whlist debugging that as component ids we store booleans
There was a problem hiding this comment.
I'm hoping we can revert this workaround sooner rather than later. Post v19 i may also look into patching the Vite client code to add support for shadow DOM with a potential followup Vite PR.
clydin
added
action: merge
|
The changes were merged into the following branches: main, 19.0.x |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
2 participants
When using the development server with the application builder (default for new projects), Angular components using ShadowDOM view encapsulation will now cause a full page reload. This ensures that these components styles are correctly updated during watch mode. Vite's CSS hot replacement client code currently does not support searching and replacing
<link>elements inside shadow roots. When support is available within Vite, an HMR based update for ShadowDOM components can be supported as other view encapsulation modes are now.