axe-core

axe-core copied to clipboard

Product

axe-core

Description

We should improve our documentation by adding an example of how to work with light DOM element that is slotted into another element. When working with a test case that uses both Shadow DOM and Light DOM, it was confusing how to write the fromShadowDom selector to only run axe inside the desired nested Shadow DOM element.

Below is the structure of the page. I was trying to test the deeply-nested-element.

custom-element
  #shaow-root
    nested-element
      #shadow-root
        <slot>
    deeply-nested-element
      #shadow-root
        <slot>
      button#target

Because deeply-nested-element is in the light DOM of custom-element and then slotted into nested-element, I had incorrectly tried to select nested-element as a shadow root and then deeply-nested-element under that:

{
  fromShadowDom: ['custom-element', 'nested-element', 'deeply-nested-element']
}

Instead the correct syntax is to remove the nested-element since deeply-nested-element is in the light dom

{
  fromShadowDom: ['custom-element', 'deeply-nested-element']
}