| <!DOCTYPE html> |
| <html> |
| <body> |
| <div> |
| <ol> |
| <li>A</li> |
| <li id="hostEquivalent"></li> |
| <li>C</li> |
| </ol> |
| </div> |
| <script> |
| // We cannot use hostEquivalent.innerHTML instead of appendChild()s becuase |
| // the parser prevents to create expected tree: |
| // |
| // <ol> |
| // <li>A</li> |
| // <li> |
| // <li>X</li> |
| // <ul>B</ul> |
| // <li>Y</li> |
| // </li> |
| // <li>C</li> |
| // </ol> |
| var hostEquivalent = document.getElementById("hostEquivalent"); |
| var shadowListRoot = document.createElement("ol"); |
| shadowListRoot.style.paddingLeft = "0px"; |
| hostEquivalent.appendChild(shadowListRoot); |
| |
| var childX = document.createElement("li"); |
| childX.innerHTML = "X"; |
| childX.style.listStylePosition = "inside"; |
| shadowListRoot.appendChild(childX); |
| |
| var childUl = document.createElement("ul"); |
| childUl.innerHTML = "B"; |
| shadowListRoot.appendChild(childUl); |
| |
| var childY = document.createElement("li"); |
| childY.innerHTML = "Y"; |
| childY.style.listStylePosition = "inside"; |
| shadowListRoot.appendChild(childY); |
| </script> |
| </body> |
| </html> |
