TypeScript
TypeScript copied to clipboard
ElementCSSInlineStyle.style should not be read-only
TypeScript Version: Nightly
Search Terms:
DOM Element HTMLElement SVGElement inline style setter
Expected behavior:
Per https://drafts.csswg.org/cssom/#elementcssinlinestyle, the style setter is forwarded to style.cssText, and thus accepts a string.
Actual behavior:
Type error:
(property) ElementCSSInlineStyle.style: CSSStyleDeclaration Cannot assign to 'style' because it is a read-only property.(2540)
Related Issues:
#13466, which (correctly) points to the old spec where ElementCSSInlineStyle.style was only described as readonly, without the PutForwards=cssText annotation.
This is however a case of an old spec that doesn't match a universal browser behavior.
https://github.com/w3c/csswg-drafts/issues/5127 where I asked the W3C for clarification
Code
const a = document.createElement("a")
a.style = ""
Output
"use strict";
const a = document.createElement("a");
a.style = "";
Compiler Options
{
"compilerOptions": {
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictPropertyInitialization": true,
"strictBindCallApply": true,
"noImplicitThis": true,
"noImplicitReturns": true,
"useDefineForClassFields": false,
"alwaysStrict": true,
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"downlevelIteration": false,
"noEmitHelpers": false,
"noLib": false,
"noStrictGenericChecks": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"esModuleInterop": true,
"preserveConstEnums": false,
"removeComments": false,
"skipLibCheck": false,
"checkJs": false,
"allowJs": false,
"declaration": true,
"experimentalDecorators": false,
"emitDecoratorMetadata": false,
"target": "ES2017",
"module": "ESNext"
}
}
Playground Link: Provided
I wonder why even MDN says "Styles should not be set by assigning a string directly to the style property (as in elt.style = "color: blue;"), since it is considered read-only, as the style attribute returns a CSSStyleDeclaration object which is also read-only." https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style
With https://github.com/microsoft/TypeScript/pull/53417 merged we can now add a mutable string setter.