# ShadowDOM Target

Imagine we have a web component `<foo-component id="fooShadowRoot">` and need to query a sub-element within its Shadow DOM. So we create a target for the foo-component:

![Defining shadow root target](https://3461068122-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdyKJ-zzeS2hB7DF04J%2F-LtymvxQS26zwwSTM_qg%2F-Ltyu6zV9plxkktlJqvU%2Fshadow-root.png?alt=media\&token=656e626d-66b7-4193-b9ee-923bb600a3d6)

Then  we create a target for the hosted element

![Defining hosted element target](https://3461068122-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdyKJ-zzeS2hB7DF04J%2F-LtymvxQS26zwwSTM_qg%2F-LtyuBDltkgSOvUR6SEb%2Fshadow-local.png?alt=media\&token=46b1df84-481f-4ea3-b5cd-c78b55abab09)

The first one is a simple target like we are used to have in Puppetry, but the second is chained one. While building it we expand Options, set **Parent target** to `SHADOW_FOO` and **Parent type** to `shadow host`.

![Chained target](https://3461068122-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdyKJ-zzeS2hB7DF04J%2F-LtymvxQS26zwwSTM_qg%2F-Ltyuth3vvu4X9qKb4xh%2Fshadow-targets.png?alt=media\&token=2bbc92ef-4afc-477d-a50b-87857ceaf1c8)

As soon as the hosted element target defined (`SHADOWDOM_FOO_LOCAL`) we can address it as any simple target:

![Addressing a chained target](https://3461068122-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdyKJ-zzeS2hB7DF04J%2F-LtymvxQS26zwwSTM_qg%2F-LtyuylKl8VVEZqJ2aEF%2Fshadow-test.png?alt=media\&token=27901b53-43ff-48f9-9902-63da559a766e)