html - how add elements with they children elements to shadow dom with javascript?

Question

hi i having problem to add elements with they children elements in shadow root:

// in shadow root:
<ul class="breadcrumb">

</ul>

<script>
var number = shadowRoot.host.attributes['number'].nodeValue;
var breadcrumb = shadowRoot.querySelector(".breadcrumb");
var li = document.createElement("li");

for(var i=0; i<number; i++)
{
  breadcrumb.append(li, "text");                        
}

i did this but i only can add one element and no children elements, i want to add this to my ul tag:

<li><slot name="dynamic-value"></slot></li>

Answer 1

document.createElement creates one LI element, so append(LI) always operates on the same element:

var li = document.createElement("li");
for(var i=0; i<number; i++)
{
  breadcrumb.append(li);                        
}

versus:

for(var i=0; i<number; i++)
{
  var li = document.createElement("li");
  breadcrumb.append(li);                        
}