[Only in legacy fast-element-1 branch. I have verified this is not an issue in main.]
Setting a design token value on an element that is the same as the currently inherited/default value is effectively a no-op. It does not reflect that value to CSS. This is fine. However, if the inherited/default value subsequently changes, the element should retain the value that was explicitly set. It should not inherit the new value, but it does.
An element should always retain the design token value that was explicitly set on it. It should begin reflecting that value to CSS if the parent's value for that token becomes different from its value.
😯 Current Behavior
The element will continue to not reflect its token value to CSS, so it will effectively inherit the value from its parent, even though it shouldn't.
I have put up PR #6879 to fix this in the archives/fast-element-1 branch (the issue does not exist in main).
🔦 Context
Was trying to keep a subtree's theme the same as the default, while setting the theme on the root as a non-default value. If the theme is set on the root after the subtree's theme is set (because of timing of Angular binding), then the subtree's theme incorrectly becomes the same as the root.
m-akinc
commented
7 months ago
🐛 Bug Report
[Only in legacy
fast-element-1branch. I have verified this is not an issue inmain.]Setting a design token value on an element that is the same as the currently inherited/default value is effectively a no-op. It does not reflect that value to CSS. This is fine. However, if the inherited/default value subsequently changes, the element should retain the value that was explicitly set. It should not inherit the new value, but it does.
💻 Repro or Code Sample
Stackblitz
🤔 Expected Behavior
An element should always retain the design token value that was explicitly set on it. It should begin reflecting that value to CSS if the parent's value for that token becomes different from its value.
😯 Current Behavior
The element will continue to not reflect its token value to CSS, so it will effectively inherit the value from its parent, even though it shouldn't.
💁 Possible Solution
Refactor the part of
DesignTokenNode.tokenValueChangeHandler.handleChange()that updates CSS reflection into a separate function. Call that function fromDesignTokenNode.handleChange(), passingthis.storeas the source.I have put up PR #6879 to fix this in the
archives/fast-element-1branch (the issue does not exist inmain).🔦 Context
Was trying to keep a subtree's theme the same as the default, while setting the theme on the root as a non-default value. If the theme is set on the root after the subtree's theme is set (because of timing of Angular binding), then the subtree's theme incorrectly becomes the same as the root.