| <!DOCTYPE html> |
| <meta charset="utf-8" > |
| <meta name="author" title="Di Zhang" href="mailto:dizhangg@chromium.org"> |
| <meta name="assert" content="Imperatively assigned node overwrites fallback contents, when dynamically created."> |
| <title>Shadow DOM: Slots and fallback contents</title> |
| <link rel="match" href="slot-fallback-content-006-ref.html"> |
| |
| <p>Test passes if there are two lines of text "B", "A" below.</p> |
| |
| <div id="host1"> |
| <slot id="slot1" name="slot1">FAIL</slot> |
| </div> |
| <div id="A">A</div> |
| <div id="B">B</div> |
| |
| <p>Test passes if there are two lines of text "D", "C" below.</p> |
| |
| <div id="host2"> |
| <slot id="slot2" name="slot2">FAIL</slot> |
| </div> |
| <div id="C">C</div> |
| <div id="D">D</div> |
| |
| <p>Test passes if there are two lines of text "F", "E" below.</p> |
| |
| <div id="host3"> |
| <slot id="slot3" name="slot3">FAIL</slot> |
| </div> |
| <div id="E">E</div> |
| <div id="F">F</div> |
| |
| <p>Test passes if there is one line of text "SLOT4" below.</p> |
| |
| <div id="host4"> |
| <slot id="slot4" name="slot4">SLOT4</slot> |
| </div> |
| <div id="G">FAIL</div> |
| <div id="H">FAIL</div> |
| |
| <p>Test passes if there is one line of text "SLOT5" below.</p> |
| |
| <div id="host5"> |
| <slot id="slot5" name="slot5">FAIL</slot> |
| </div> |
| <div id="I">FAIL</div> |
| <div id="J">FAIL</div> |
| |
| <script> |
| /* |
| 1. Append nodes to document. |
| 2. Assign nodes to slot. |
| */ |
| const shadowRoot1 = host1.attachShadow({ mode: "open", slotAssignment: 'manual' }); |
| shadowRoot1.appendChild(slot1); |
| const s1 = shadowRoot1.getElementById('slot1'); |
| host1.append(A, B); |
| s1.assign(B, A); |
| |
| /* |
| 1. Assign nodes to slot. |
| 2. Append nodes to document. |
| */ |
| const shadowRoot2 = host2.attachShadow({ mode: "open", slotAssignment: 'manual' }); |
| shadowRoot2.appendChild(slot2); |
| const s2 = shadowRoot2.getElementById('slot2'); |
| s2.assign(D, C); |
| host2.append(C, D); |
| |
| /* |
| 1. Assign nodes to slot. |
| 2. Change the fallback content. |
| 3. Append nodes to document. |
| */ |
| const shadowRoot3 = host3.attachShadow({ mode: "open", slotAssignment: 'manual' }); |
| shadowRoot3.appendChild(slot3); |
| const s3 = shadowRoot3.getElementById('slot3'); |
| s3.assign(F, E); |
| s3.innerText = 'FAIL'; |
| host3.append(E, F); |
| |
| /* |
| 1. Append nodes to document. |
| 2. Assign nodes to slot. |
| 3. Remove nodes from document. |
| */ |
| const shadowRoot4 = host4.attachShadow({ mode: "open", slotAssignment: 'manual' }); |
| shadowRoot4.appendChild(slot4); |
| const s4 = shadowRoot4.getElementById('slot4'); |
| host4.append(G, H); |
| s4.assign(H, G); |
| G.remove(); |
| H.remove(); |
| |
| /* |
| 1. Append nodes to document. |
| 2. Assign nodes to slot. |
| 3. Change the fallback content. |
| 4. Remove nodes from document. |
| */ |
| const shadowRoot5 = host5.attachShadow({ mode: "open", slotAssignment: 'manual' }); |
| shadowRoot5.appendChild(slot5); |
| const s5 = shadowRoot5.getElementById('slot5'); |
| host5.append(I, J); |
| s5.assign(J, I); |
| s5.innerText = 'SLOT5'; |
| I.remove(); |
| J.remove(); |
| |
| </script> |