Repository navigation
fix(html): fall back to attribute for read-only properties - #320
Merged
smalluban merged 1 commit intoSep 25, 2026
Merged
Conversation
An attribute expression set the property whenever it existed on the element (`name in target`), also when the property was read-only. For `form` or `list` of the `<input>` element, or a getter-only accessor of an external custom element, the assignment throws a TypeError in strict mode, and the rest of the template is not updated. Set the property only if it is writable (a writable data property or an accessor with a setter), otherwise set the attribute.
|
coverage: 99.875%. remained the same — dobexx:fix/template-readonly-property-fallback into hybridsjs:main |
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
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.
Fixes #319.
An attribute expression sets the property of the same name whenever
propertyName in targetis true (src/template/resolvers/property.js:37and:42, andsrc/template/core.js:435for mixed values). That is also true for read-only properties, likeformandlistof<input>or a getter-only accessor of an external custom element. The assignment then throws aTypeErrorin module code, and the rest of the template is not updated. Reproduction in #319.This change sets the property only if it's writable: a data property with
writable: trueor an accessor with a setter. Otherwise, the expression falls back to the attribute, as it already does for a missing property. A smallisWritable()helper insrc/template/utils.jsreplaces the threeinchecks. It runs theincheck first, so attributes without a property, likeclass="btn ${type}"in the mixed-value path, cost the same as before. The docs sentence in Properties & Attributes now mentions read-only properties.Independent of #316: both change
property.jsin different lines and merge cleanly in either order. Until #316 is merged, this change also covers SVG children inhtmltemplates, whosex,widthandpointsproperties are read-only.One behavior change: an expression on a read-only hybrids property (a computed property without a setter) now sets an attribute of the same name instead of throwing.
Tests in
test/spec/html.js:<input form list>gets both attributes, andinput.formis the form. A getter-only property of an external element gets the attribute.<input list="list-${…}">gets the attribute.The three tests fail without the fix (Chrome Headless:
Cannot set property … which has only a getter, WebKit:Attempted to assign to readonly property.). Full suite in Chrome Headless onmain: 611 of 611 with the fix, 608 of 611 without it; on top of #316 in Chrome Headless and WebKit: 612 of 612 with the fix, 609 of 612 without it. Firefox was not run locally. Lint is clean, and prettier is clean for the changed source and test files.