Usare lo shadow DOM come un iframe migliore

Mailcoach può inviare bellissime newsletter al tuo pubblico. Può anche mostrare qualsiasi newsletter inviata in un bellissimo archivio che puoi personalizzare a tuo piacimento.

In questo post del blog vorrei spiegare come ci assicuriamo che il CSS della nostra pagina web non rovini il layout della tua newsletter.

Benvenuti nello Shadow DOM

Diamo un'occhiata a una pagina di dettaglio di una newsletter inviata.

Questa pagina ha due parti. In alto troviamo il modulo di iscrizione, mentre il contenuto della newsletter è mostrato in basso.

La newsletter è un documento HTML completo, quindi non possiamo semplicemente prendere un documento HTML completo e usarlo nel template principale. Anche se prendessimo solo il contenuto della parte body della newsletter e lo iniettassimo nella pagina, ci sarebbe comunque un problema con lo styling.

Vogliamo assicurarci che lo styling della pagina web sia indipendente da come viene visualizzata la newsletter e viceversa. Sarebbe piuttosto brutto se mostrassimo la newsletter usando lo stesso colore di sfondo giallo del sito, visto che la newsletter non è stata inviata con uno sfondo giallo.

Questi problemi possono essere risolti usando lo shadow DOM. Usando lo Shadow DOM, puoi incapsulare una porzione di HTML. Ciò che viene renderizzato al suo interno non è influenzato dalle altre parti della tua pagina e viceversa.

Vediamo come usiamo lo shadow DOM in Mailcoach. Ecco una parte dell'HTML usato per renderizzare la pagina di dettaglio mostrata sopra.

<nav class="back">
    <a href="{{ $emailList->websiteUrl() }}">
        <i>←</i> Back to overview
    </a>
</nav>
<div class="show">
    <article class="card">
        <header class="card-header">
            <time datetime="{{ $campaign->sent_at }}">{{ $campaign->sent_at->format('F j, Y') }}</time>
            <h2>{{ $campaign->subject }}</h2>
        </header>
        <div class="webview">
           <x-mailcoach::web-view :html="$webview"/>
        </div>
    </article>
</div>

Nota che il componente Blade web-view riceve la variabile $webview, che contiene l'intero contenuto HTML di una newsletter inviata.

Quel componente Blade web-view è supportato da questa view che contiene la ✨ magia dello shadow DOM ✨.

<script>
    class EmbeddedWebview extends HTMLElement {
        connectedCallback() {
            const shadow = this.attachShadow({ mode: 'closed' });
            shadow.innerHTML = @json($html);
        }
    }
    window.customElements.define('embedded-webview', EmbeddedWebview);
</script>
<embedded-webview />

Esaminiamo questo codice. Nella parte script, creiamo prima un HTMLElement personalizzato chiamato EmbeddedWebview. La funzione connectedCallback verrà chiamata quando il nostro elemento personalizzato viene renderizzato. Nella variabile shadow facciamo riferimento allo shadow DOM dell'elemento. E infine, impostiamo l'HTML dello shadow DOM all'HTML della newsletter (contenuto in $html).

Ricorda, il vantaggio principale di usare questo shadow DOM rispetto al DOM normale è che lo shadow DOM è completamente isolato dal DOM normale.

Infine, mettiamo il nostro elemento <embedded-webview /> nel DOM normale della pagina, che quando viene renderizzato eseguirà il codice nel tag script. Come vedi, non c'è poi così tanto codice coinvolto in tutto questo.

Perché non usare un iframe

Potresti chiederti perché non abbiamo usato un semplice iframe per questo. Lo shadow DOM offre vantaggi significativi rispetto a un iframe per questo caso d'uso.

Innanzitutto, il contenuto dello shadow DOM segue il flusso del documento HTML principale. L'HTML personalizzato crescerà insieme al contenuto, e non verranno introdotte barre di scorrimento o strani comportamenti di scrolling.

Il secondo vantaggio ha a che fare con la sicurezza. Impostando l'innerHTML dello shadow DOM, qualsiasi JavaScript presente nel valore dell'innerHTML non verrà eseguito. Questo è utile per impedire che qualcuno abusi di Mailcoach per mettere in scena attacchi XSS.

In conclusione

Usando lo shadow DOM, possiamo assicurarci che la newsletter inviata che mostriamo non sia influenzata dal layout del nostro sito web.