HTML attributes change to lower case

Question

How to stop attribute to change case in html

let test1 = document.createElement('div');

test1.innerHTML = '<div [ngClass]>Test</div>';

console.log('--------dynamic', test1.innerHTML);

Here, [ngClass] change to ngclass.

Quentin · Answer 1 · 2017-11-29T13:37:37.233

2

HTML attribute names are case-insensitive.

There is no way to stop browsers from normalising them when you give them some HTML to parse into a DOM and then serialise that DOM back to HTML.

If you want to process Angular's template language and maintain case sensitivity, then don't do so using tools that are designed to deal with HTML.

edited Nov 29 '17 at 13:37

answered Nov 29 '17 at 13:32

Quentin

Is it possible to prevent case change in attribute? – Varun Jain Nov 29 '17 at 13:42
@VarunJain — Each paragraph of this answers says that you cannot (at least if you do what you are doing). – Quentin Nov 29 '17 at 13:44

score 2 · Answer 2 · answered Nov 29 '17 at 13:36

2

This code

test1.innerHTML = '<div [ngClass]>Test</div>';

is entirely pointless. Angular won't do anything with [ngClass].

Angular processes Angular specific markup only when it compiles a components template, but not when it is added to the DOM.

If you want to add Angular specific markup at runtime, you need to dynamically create and compile a component.

answered Nov 29 '17 at 13:36

Yes we need to convert string to html object and then make some changes in dom before we send same to dynamic component. Is it possible to prevent case change in html? – Varun Jain Nov 29 '17 at 13:40
1

Why do you need to add it to the DOM? I don't think it's possible to preserve case when adding it to the DOM. – Günter Zöchbauer Nov 29 '17 at 13:41
Actually we want to find particular elements and replace with some other element selectors. So we need to convert string to html object to find children. – Varun Jain Nov 29 '17 at 13:44
1

I'm pretty sure there is no way to do that utilizing browser APIs. As soon as it is actual HTML, case looses meaning and the browser might or might not drop this information. If you find one browser where it works, doesn't guarantee that it will work in the next version or in any other browser. – Günter Zöchbauer Nov 29 '17 at 13:47

2 Answers2