Search code examples
javascripthtmlweb-component

innerHTML is changing the value entered

In an app I'm working on, I'd found that updating the DOM by rewriting a new value to innerHTML doesn't give the expected result.

I typed the following command in the DevTools console:

document.querySelector('main-app').shadowRoot.querySelector('.unitslist').innerHTML = '<unit-bar>1</unti-bar><unit-bar>2</unti-bar>'

With the following result:

<unit-bar>1<unit-bar>2</unit-bar></unit-bar>
Solution

  • You have a typo in your strings. You open with <unit-bar>, but close with </unti-bar>. The closing tags are therefore probably ignored by the browser and it guesses where they should be, resulting in the difference you see.