it.hideout-lastation.com
Come usare l'HTML
&
Con Shadow DOM
Lo slot HTML è uno degli standard più interessanti del W3C. Combinalo con un altro impressionante standard W3C chiamato templates, e hai una favolosa miscela con cui lavorare. Essere in grado di creare e aggiungere elementi HTML a una pagina utilizzando JavaScript è un compito necessario e importante.
È utile quando uno snippet di codice deve apparire solo in determinati momenti o quando non si desidera digitare centinaia di elementi HTML strutturati in modo simile ma si desidera automatizzare il processo .
La creazione di elementi HTML in JavaScript non è così desiderabile . È una seccatura dover controllare e ricontrollare se hai coperto tutti i tag, metterli nell'ordine giusto, tutto sommato, c'è solo troppo da digitare e tenere traccia di. Questo tumulto, tuttavia, ha trovato una soluzione quando il tag apparso. Se qualcosa deve essere aggiunto alla pagina in modo dinamico, è possibile inserirlo all'interno della pagina elemento.
In questo post, ti mostrerò come puoi usare il
Il e tag
Il il tag contiene codice HTML che non verrà visualizzato dai browser fino a quando non viene aggiunto correttamente al documento, utilizzando JavaScript. Il
Un DOM ombra è simile a un normale DOM (il modello del documento analizzato da HTML). Crea un albero con scope (un albero DOM ombra), che ha una radice propria e può anche avere uno stile proprio .
Quando si inserisce l'albero DOM ombra in un elemento nel documento principale - l'elemento verrà quindi chiamato l' host ombra -, tutti gli elementi figlio dell'host shadow contrassegnati con l'attributo slot (non lo stesso di quelli di cui sopra
Shadow DOM, al momento di scrivere questo articolo (luglio 2017), è supportato solo nei browser basati su WebKit e Blink ma è possibile verificare lo stato effettivo del supporto del browser su CanIUse in qualsiasi momento.Configurare l'HTML
Ancora confuso? Vediamo un po 'di codice, a partire da elemento.
Dentro , c'è un All'interno del modello, ho anche aggiunto alcuni stili di base per la tabella, usando il useremo come progetto per la creazione di alcune tabelle che verranno aggiunte a un documento. Ci sono
e ) che funge da segnaposto per i titoli delle colonne e i valori delle celle. Ogni slot ha un attributo name univoco che lo identifica .