Shadow DOM Example

Test 1

This form fails because it has a label in the shadowDOM.

Light DOM:

Shadow DOM containing a label for the input:

Test 2

There are two DIVs, both with an ID of "pass1". One is in the ShadowDOM while the other is in the Light DOM. Should pass because the nodes are in separate contexts.

Light DOM:

This is a DIV with the id of pass1

Shadow DOM:

Test 3

There are two DIVs with a class of "dave" that contain an image without alt text. One is in the ShadowDOM while the other is in the Light DOM. The Light DOM one has css to apply display:none to the dave class. The Shadow DOM DIV also has the dave class but no CSS. The light DOM image should not be flagged because it is hidden. The Light DOM CSS should not bleed through to the shadowDOM so the image in there should not be hidden and should be flagged for missing alt text.

Light DOM:

Shadow DOM with the same image and no CSS:

Test 4

This shadow DOM contains a label and a slot. The slot is populated by a lightDOM form input with an ID matching the label. The label is in the shadowDOM but IDs shouldn't bleed through so the input should be flagged for lack of a label.

Test 5

There are three DIVs, all with an ID of "pass3". One is in the lightDOM, the second is in a shadowDOM and the third is inside a shadowDOM nested within the previous shadowDOM. This should not be flagged.

This is a DIV with the ID of pass3

Test 6

There are three DIVs, all with an ID of "pass4". One is in the lightDOM while the other two are in separate shadowDOMs. Should pass because all three nodes are in separate contexts.

Light DOM:

This is a DIV with the id of pass4

Shadow DOM:

Test 7

There are four DIVs, all with an ID of "sam". First is in the lightDOM, the second is in a shadowDOM while the third and fourth are inside a shadowDOM nested within the previous shadowDOM. Only the two inside the nested shadowDOM should be flagged.

This is a DIV with the ID of sam

Test 8

This is a web component. The content to be slotted into the template is an img with missing alt text.

Test 9

This is a shadowDOM located inside an iFrame that should not be flagged:

Test 10

This is a shadowDOM which has comments and an img with no alt

Test 11

This is a shadowDOM located inside an iFrame that should be flagged:

Test 12

This is a shadowDOM which contains a link to a page, which spiders should find