feat(core): update component styles in-place during hmr - #69964
Draft
clydin wants to merge 1 commit into
Draft
Conversation
clydin
force-pushed
the
feat/hmr-inplace-style-updates
branch
2 times, most recently
from
July 27, 2026 23:28
1ebb122 to
d5ff82a
Compare
During hot module replacement (HMR), updating component inline styles (`<style>`) or external stylesheet URLs (`<link rel="stylesheet">`) previously triggered a complete destruction and recreation of matching component view trees (`LView`). This caused loss of live application state (such as input values, scroll positions, component signal state, and iframe instances) whenever a CSS or SCSS file was edited. This change introduces `replaceStyles` on `SharedStylesHost`, allowing HMR to mutate inline style `textContent` or link `href` attributes in-place. The method accepts an `isScoped` flag (`oldDef.encapsulation !== ViewEncapsulation.None`) to distinguish component-scoped styles from un-encapsulated styles: - For scoped styles (`isScoped === true`), in-place mutation and tracking record re-keying runs regardless of `record.usage`, preserving active instance usage counts so that multi-instance components unmount cleanly without premature style removal. - For unscoped styles (`isScoped === false`), if `record.usage > 1`, it falls back to `removeUsage` + `addUsage` to protect other component classes sharing identical un-encapsulated initial CSS. If non-style metadata (such as `template`, `inputs`, `outputs`, `providers`, `hostBindings`, `selectors`, or `hostDirectives`) or encapsulation (`ShadowDom`) changes alongside styles, HMR safely falls back to view tree recreation.
clydin
force-pushed
the
feat/hmr-inplace-style-updates
branch
from
July 27, 2026 23:57
d5ff82a to
39644aa
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
During hot module replacement (HMR), updating component inline styles
(
<style>) or external stylesheet URLs (<link rel="stylesheet">) previouslytriggered a complete destruction and recreation of matching component view
trees (
LView). This caused loss of live application state (such as inputvalues, scroll positions, component signal state, and iframe instances) whenever
a CSS or SCSS file was edited.
This change introduces
replaceStylesonSharedStylesHost, allowing HMR tomutate inline style
textContentor linkhrefattributes in-place. The methodaccepts an
isScopedflag (oldDef.encapsulation !== ViewEncapsulation.None)to distinguish component-scoped styles from un-encapsulated styles:
isScoped === true), in-place mutation and trackingrecord re-keying runs regardless of
record.usage, preserving active instanceusage counts so that multi-instance components unmount cleanly without premature
style removal.
isScoped === false), ifrecord.usage > 1, it fallsback to
removeUsage+addUsageto protect other component classes sharingidentical un-encapsulated initial CSS.
If non-style metadata (such as
template,inputs,outputs,providers,hostBindings,selectors, orhostDirectives) or encapsulation (ShadowDom)changes alongside styles, HMR safely falls back to view tree recreation.