Quando il browser incontra alcuni componenti, automaticamente li renderizza con una serie di DIV a cui applica un CSS predefinito.

Un esempio molto chiaro è quello del player audio, creato con il TAG:

Questo TAG HTML viene tradotto automaticamente dal browser in qualcosa tipo:

Se però provate ad aprire gli strumenti per sviluppatori del browser, tutta questa parte (quella sotto #shadow-root) effettivamente non viene mostrata. Come faccio quindi se volessi fare delle modifiche grafiche “al volo” per vedere cosa accade?

Nel caso usiate Firefox o derivati, si può abilitare la visualizzazione dei DOM nascosti aprendo le preferenze del browser con about:config e poi impostare a true le seguenti due direttive (se non esistono, vanno create come booleane):

• devtools.inspector.showUserAgentShadowRoots
• devtools.inspector.showAllAnonymousContent

Nel caso usiate Chrome o derivati, aprite la finestra degli sviluppatori, poi accedete alle impostazioni (la rotellina a forma di ingranaggio in alto a destra) ed attivate l’opzione “Show user agent shadow DOM“.

In entrambe i casi sarà necessario riavviare il browser.

enjoy!