Définition

Le Shadow DOM est une API permettant d'encapsuler le markup, le style et le comportement d'un composant web. Ce DOM "caché" n'est pas accessible via les sélecteurs CSS ou JavaScript standard, posant un défi pour le web scraping. Les Web Components modernes l'utilisent intensivement.

Deep Dive

Shadow DOM : le défi caché du web scraping

Qu'est-ce que le Shadow DOM ?

Le Shadow DOM crée une arborescence DOM séparée attachée à un élément :

```html

<custom-product>

#shadow-root (open/closed)

<h2>Titre produit</h2>

</div>

</custom-product>

```

Types de Shadow DOM

**Open** : Accessible via `element.shadowRoot`

**Closed** : Inaccessible (théoriquement), utilisé pour la sécurité

Impact sur le scraping

**Ce qui ne fonctionne PAS :**

```javascript

document.querySelector('custom-product .price'); // null

document.querySelectorAll('h2'); // Ne trouve pas le titre

```

**Solution pour Shadow DOM open :**

```javascript

const host = document.querySelector('custom-product');

const shadow = host.shadowRoot;

const price = shadow.querySelector('.price'); // Fonctionne !

```

Frameworks utilisant Shadow DOM

LitElement / Lit

Stencil.js

Polymer

Salesforce Lightning Web Components

Code Playground

Techniques d'extraction de contenu depuis Shadow DOM ouvert et fermé avec Playwright

javascript

// Extraction récursive de tout le contenu Shadow DOM
async function extractAllShadowContent(page) {
  return await page.evaluate(() => {
    function extractShadowRoots(element) {
      const results = [];
      
      // Extraire le contenu de cet élément
      if (element.shadowRoot) {
        results.push({
          host: element.tagName.toLowerCase(),
          content: element.shadowRoot.innerHTML,
          text: element.shadowRoot.textContent.trim()
        });
        
        // Récursion dans le shadow root
        element.shadowRoot.querySelectorAll('*').forEach(child => {
          results.push(...extractShadowRoots(child));
        });
      }
      
      // Récursion dans les enfants normaux
      element.querySelectorAll('*').forEach(child => {
        results.push(...extractShadowRoots(child));
      });
      
      return results;
    }
    
    return extractShadowRoots(document.body);
  });
}

// Avec Playwright - Piercing du Shadow DOM
async function scrapeShadowDOM(page, selector) {
  // Playwright peut percer le Shadow DOM avec >> et >>>
  // >> : traverse un shadow root
  // css= : sélecteur CSS
  
  const element = await page.locator(
    'custom-product >> .price'
  ).textContent();
  
  // Ou utiliser pierceAll pour tous les shadow roots
  const allPrices = await page.locator(
    ':scope >>> .price'
  ).allTextContents();
  
  return allPrices;
}

// Détection automatique de Shadow DOM
async function hasShadowDOM(page) {
  return await page.evaluate(() => {
    return !!document.querySelector('*').shadowRoot ||
           document.querySelectorAll('[shadowroot]').length > 0;
  });
}

Avis d'Expert 2026

Le Shadow DOM se généralise avec l'adoption des Web Components, notamment dans les CMS headless et les design systems. En 2026, Playwright est devenu l'outil de référence grâce à ses sélecteurs "piercing" natifs. Pour les Shadow DOM fermés, l'injection de scripts au niveau du runtime reste la seule option.

Shadow DOM