Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Copilot Lvl 2
Message 1 of 1

Javascript web component issue

Just learn Javascript native web component but I got a problem.

 

If I could write html code in the constructor like this (in this case, to construct a unorder list):

class FooElement extends HTMLElement{
  constructor(){
    super();
    let shadowRoot = this.attachShadow({mode:"open"});
    shadowRoot.innerHTML = 
    `<ul>
      <li>something</li>
    </ul>`
  };
}
window.customElements.define('foo-elemnent',FooElement);

Then why I need this method using appendChild() :

class FooElement extends HTMLElement{
  constructor(){
    super();
    let shadowRoot = this.attachShadow({mode:"open"});
    let ul = document.createElement('ul');
    let li = document.createElement('li');

    li.appendChild(document.createTextNode('something'));
    ul.appendChild(li);
    shadowRoot.appendChild(ul);
    
}
window.customElements.define('foo-elemnent',FooElement);

Please leave me some advices, I am a newbie.Thanks a lot.