TypeScript icon indicating copy to clipboard operation
TypeScript copied to clipboard

ElementCSSInlineStyle.style should not be read-only

Open pygy opened this issue 5 years ago • 2 comments

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

pygy avatar May 29 '20 07:05 pygy

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

byterider avatar Jan 18 '21 11:01 byterider

With https://github.com/microsoft/TypeScript/pull/53417 merged we can now add a mutable string setter.

louwers avatar May 20 '24 22:05 louwers