Cos'è shadow root

99

Negli strumenti per sviluppatori di Google Chrome, vedo un tag a #shadow-rootdestra sotto <html lang="en">. cosa fa ea cosa serve? Non lo vedo in Firefox né in IE; solo in Chrome, è una caratteristica speciale?

Se lo apro, mostra <head>e <body>e un collegamento accanto a denominato reveal, facendo clic, punta a <head>e <body>, nient'altro.

— Andrea
fonte

97

Questo è un indicatore speciale dell'esistenza di uno Shadow DOM . Esistono da anni, ma agli sviluppatori non sono mai state fornite API fino a poco tempo fa. Chrome ha avuto questa funzionalità per un po ', altri browser stanno ancora recuperando. Può essere attivato nelle Impostazioni DevTools nella sezione "Elementi". Deseleziona "Mostra DOM shadow agente utente". Questo nasconderà almeno eventuali Shadow DOM creati internamente (come gli elementi selezionati). Non sono sicuro subito se influisce su quelli creati dall'utente, come gli elementi personalizzati.

Questi si presentano anche in cose come iframe, dove hai un albero DOM separato nidificato all'interno di un altro.

Lo Shadow DOM sta semplicemente dicendo che una parte della pagina ha il proprio DOM al suo interno. Gli stili e lo scripting possono essere definiti all'interno di quell'elemento in modo che ciò che viene eseguito in esso venga eseguito solo in quel limite.

Questo è uno dei componenti principali necessari per il funzionamento dei componenti Web . Si tratta di una nuova tecnologia che consente agli sviluppatori di creare i propri componenti incapsulati che gli sviluppatori possono utilizzare proprio come qualsiasi altro elemento HTML.

— Garbee
fonte

Quindi questa è una domanda ovvia su come utilizzare quegli elementi personalizzati creati o componenti web per qualsiasi progetto? Diciamo che sto usando Polymer ...

— Kushal Jayswal

62

Come esempio di Shadow DOM, quando hai un <video>tag su una pagina web, viene mostrato come un solo tag nel DOM principale, ma se abiliti Shadow DOM, sarai in grado di vedere l'HTML del lettore video (player DOM).

Questo è spiegato in modo appropriato in questo articolo, http://webcomponents.org/articles/introduction-to-shadow-dom/

— Nagendra Rao
fonte

Ricevo un avviso di sicurezza da Firefox quando seguo il collegamento webcomponents.org, per qualche tipo di problema con il certificato.

— Sebastian Norr

1

Sì, sembra che il loro certificato SSL debba essere rinnovato. È comunque possibile visualizzare il sito ignorando l'avviso.

— Nagendra Rao

5

Nel caso dei componenti web, c'è un problema fondamentale che rende difficili da usare i widget costruiti con HTML e JavaScript.

Problema : l'albero DOM all'interno di un widget non è incapsulato dal resto della pagina. Questa mancanza di incapsulamento significa che il foglio di stile del documento potrebbe applicarsi accidentalmente a parti all'interno del widget; il tuo JavaScript potrebbe modificare accidentalmente parti all'interno del widget; i tuoi ID potrebbero sovrapporsi agli ID all'interno del widget e così via.

Shadow DOM risolve il problema dell'incapsulamento dell'albero DOM .

Ad esempio, se avessi un markup come questo:

<button>Hello, world!</button>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>

quindi invece di

Hello, world!

la tua pagina sembra

こんにちは、影の世界!

Non solo, se JavaScript sulla pagina chiede quale sia il textContent del pulsante, non otterrà “こんにちは、影の世界!”, ma “Hello, world!” perché la sottostruttura DOM sotto la radice shadow è incapsulata .

NOTA : ho ripreso il contenuto sopra da https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ perché mi ha aiutato a capire il DOM shadow un po 'meglio delle risposte già qui. Ho aggiunto contenuti pertinenti qui in modo che possano aiutare gli altri, ma dai un'occhiata al link per una discussione dettagliata sullo stesso.

— Aniket Thakur
fonte