# Shadow Dom Kullanımı

**Giriş**

Modern web uygulamalarında, bileşen bazlı mimarilerin yaygınlaşmasıyla birlikte Shadow DOM kullanımı artmıştır. Shadow DOM, bir bileşenin iç yapısını dış dünyadan izole ederek daha güvenli, bakımı kolay ve çakışmalara kapalı bir yapı sunar. Ancak bu izolasyon, otomasyon ve test süreçlerinde elementlere erişimi zorlaştıran teknik kısıtlar doğurur. Shadow DOM kullanılan ekranlarda klasik XPath yöntemleri geçerli değildir. Bu nedenle JavaScript tabanlı Shadow Root erişimi tercih edilmelidir.

* **Shadow DOM Nedir?**

Shadow DOM, bir HTML elementinin altında çalışan ve ana DOM ağacından izole edilmiş bir alt DOM yapısıdır.

* **Nested Shadow Dom Nedir?**

Nested Shadow DOM, bir Shadow DOM’un içinde başka bir Shadow DOM bulunması durumudur.\
Yani Shadow DOM’ların birden fazla katman halinde iç içe kullanılmasıdır.

* **Open vs Closed Shadow Root**

Open shadow root JavaScript ile erişilebilirken, closed shadow root dışarıdan erişime kapalıdır.

* **Selector Davranışına Etkisi**

Shadow DOM kullanılan yapılarda XPath ve klasik CSS selector’lar doğrudan çalışmaz. Elementlere erişim için shadow-aware selector’lar veya JavaScript tabanlı yöntemler kullanılmalıdır.

* **Shadow Root Tespiti**

Chrome DevTools üzerinden #shadow-root (open) ifadesi ile tespit edilebilir. Element ağacında aşağıdaki yapı aranır.

\<Custom Component>

&#x20;     \#shadow-root (open)

* **Shadow DOM İçinde Element Seçimi**

Selector zinciri host element → shadow root → hedef element şeklinde ilerler.

**Örnek:**

book-app >>> #input-user

* **Nested Shadow DOM Kullanımı**

Bazı uygulamalarda shadow root yapıları iç içe olabilir.

* **Selector örneği:**

book-app >>> book-explore >>> #input-user

**Kullanım Şekli** (Tüm web aktiviteleri için aynıdır örnek Web Page Click üzerinden gösterilmiştir.)

**Özellikler**&#x20;

&#x20;       **1.Shadow Dom**

<figure><img src="/files/7tQ4MG7VkSIPvB2BErhb" alt=""><figcaption></figcaption></figure>

&#x20;          **2.Nested Shadow Dom**

<figure><img src="/files/eew3G9fXpZiSYzoyUJO4" alt=""><figcaption></figcaption></figure>

**Inputs**&#x20;

* **Control Type**&#x20;
  * **Veri Tipi:** Control Type&#x20;
  * **Açıklama:** Tıklama işlemi yapılacak öğeyi tanımlamak için kullanılacak yolun türünü belirtir (ShadowDom ya da NestedShadowDom).&#x20;
  * **Örnek Kullanım:**&#x20;
    * **Shadow Dom**
    * **Nested Shadow Dom**
* **Control Value**&#x20;
  * **Veri Tipi:** Text&#x20;
  * **Açıklama:** İşlem yapılacak öğeyi tanımlayan yol veya seçici değeri.&#x20;
  * **Örnek Kullanım:**&#x20;
    * **Shadow Dom:** book-app >>> #input-user
    * **Nested Shadow Dom:** book-app >>> book-explore >>> #input-user
* **Event Type**&#x20;
  * **Veri Tipi:** Text&#x20;
  * **Açıklama:** Tıklama işleminin türünü belirler. JavaScript tabanlı bir tetikleme seçilir.&#x20;
  * **Örnek Kullanım:**&#x20;
    * **JavaScript:** JavaScript kullanılarak tıklama işlemi gerçekleştirilir.&#x20;
* **Timeout**&#x20;
  * **Veri Tipi:** Number&#x20;
  * **Açıklama:** İşlem sırasında tarayıcı üzerinden yanıt alınamazsa kaç saniye boyunca beklenmesi gerektiğini belirtir.&#x20;
  * **Örnek Kullanım:**&#x20;
    * **5:** 5 saniye beklenir.&#x20;
    * **10:** 10 saniye beklenir.&#x20;

**Outputs :** Aktivite herhangi bir çıktı sunmamaktadır.&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.genrpa.com/aktiviteler/web/shadow-dom-kullanimi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.