Shadow DOM – SMsoft – informatica e dintorni https://blog.smsoft.it consigli settimanali su MacOS, GNU/Linux ed Open Source Mon, 07 Feb 2022 14:28:19 +0000 it-IT hourly 1 https://wordpress.org/?v=68111 The Shadow DOM https://blog.smsoft.it/2022/03/15/the-shadow-dom/ https://blog.smsoft.it/2022/03/15/the-shadow-dom/#respond Tue, 15 Mar 2022 09:30:00 +0000 https://blog.smsoft.it/?p=5375 Leggi tutto]]> 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:

<audio src="Song.mp3" type="audio/mpeg" controls></audio>

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!

]]> https://blog.smsoft.it/2022/03/15/the-shadow-dom/feed/ 0