Extrahieren von Text aus Inhalten mithilfe von HTML Slot, HTML-Template und Shadow DOM

Kapitelnamen in Büchern, Zitate aus einer Rede, Schlüsselwörter in einem Artikel, Statistiken in einem Bericht – das sind alles Arten von Inhalten, die hilfreich sein könnten, um sie zu isolieren und zu einer übergeordneten Zusammenfassung dessen zu machen, was wichtig ist.

Haben Sie zum Beispiel schon einmal gesehen, wie Business Insider die wichtigsten Punkte eines Artikels anzeigt, bevor er auf den Inhalt eingeht?

Das ist die Art von Ding, die wir tun werden, aber wir versuchen, die Höhepunkte *direkt* aus dem Artikel mithilfe von HTML Slot, HTML-Template und Shadow DOM zu extrahieren.

Diese drei titularischen Spezifikationen werden typischerweise als Teil von Web Components verwendet – voll funktionsfähige, benutzerdefinierte Elementmodule, die auf Webseiten wiederverwendet werden sollen.

Nun, was wir tun wollen, d.h. Text extrahieren, benötigt keine benutzerdefinierten Elemente, kann aber diese drei Technologien nutzen.

Es gibt einen rudimentäreren Ansatz, dies zu tun. Zum Beispiel könnten wir Text extrahieren und den extrahierten Text mit einem einfachen Skript auf einer Seite anzeigen, *ohne* Slot und Template zu verwenden. Warum also sie verwenden, wenn wir mit etwas Vertrauterem gehen können?

Der Grund dafür ist, dass **die Verwendung dieser Technologien uns einen vordefinierten Markup-Code (optional auch Stil oder Skript) für unseren extrahierten Text in HTML ermöglicht.** Das werden wir im Laufe dieses Artikels sehen.

Nun, als eine sehr stark vereinfachte Definition der Technologien, die wir verwenden werden, würde ich sagen:

• Ein **Template** ist eine Menge von Markups, die auf einer Seite wiederverwendet werden können.
• Ein **Slot** ist eine Platzhalterposition für ein bestimmtes Element von der Seite.
• Ein **Shadow DOM** ist ein DOM-Baum, der auf der Seite noch nicht wirklich existiert, bis wir ihn mithilfe von Skripten hinzufügen.

Wir werden sie etwas detaillierter betrachten, sobald wir mit dem Codieren beginnen. Vorerst werden wir einen Artikel erstellen, der eine Liste der wichtigsten Punkte aus dem Text enthält. Und wie Sie wahrscheinlich schon erraten haben, werden diese wichtigsten Punkte aus dem Artikeltext extrahiert und in der Sektion der wichtigsten Punkte zusammengefasst.

Siehe den Pen
Text Extraction with HTML Slot and HTML Template von Preethi Sam (@rpsthecoder)
auf CodePen.

Die wichtigsten Punkte werden als Liste mit einer Gestaltung zwischen den Punkten angezeigt. Lassen Sie uns also zuerst ein **Template für diese Liste** erstellen und einen Platz dafür bezeichnen.

<article><!-- Article content --></article>

<!-- Section where the extracted keypoints will be displayed -->
<section id='keyPointsSection'>
  <h2>Key Points:</h2>
  <ul><!-- Extracted key points will go in here --></ul>
</section>

<!-- Template for the key points list -->
<template id='keyPointsTemplate'>
  <li><slot name='keyPoints'></slot></li>
  <li style="text-align: center;">&#x2919;&mdash;&#x291a;</li>
</template>

Wir haben eine semantische <section> mit einer <ul>, wo die Liste der wichtigsten Punkte hingehört. Dann haben wir ein <template> für die Listenelemente, das zwei <li>-Elemente enthält: eines mit einem <slot>-Platzhalter für die wichtigsten Punkte aus dem Artikel und ein weiteres mit einem zentrierten Design.

Das Layout ist willkürlich. Wichtig ist **die Platzierung eines <slot>, wo die extrahierten wichtigsten Punkte hingehören**.

Alles, was sich im <template> befindet, wird erst auf der Seite gerendert, wenn wir es mithilfe von Skripten hinzufügen. Darüber hinaus kann das Markup innerhalb von <template> mit Inline-Stilen oder mit <style> umschlossenem CSS gestylt werden.

<template id='keyPointsTemplate'>
    <li><slot name='keyPoints'></slot></li>
    <li style="text-align: center;">&#x2919;&mdash;&#x291a;</li>
    <style>
        li{/* Some style */}
    </style>
</template>

Der lustige Teil! **Lassen Sie uns die wichtigsten Punkte aus dem Artikel auswählen.** Beachten Sie den Wert des name-Attributs für den <slot> innerhalb des <template> (keyPoints), denn wir werden ihn brauchen.

<article>
  <h1>Bears</h1>
  <p>Bears are carnivoran mammals of the family Ursidae. <span><span slot='keyPoints'>They are classified as caniforms, or doglike carnivorans</span></span>. Although only eight species of bears <!-- more content --> and partially in the Southern Hemisphere. <span><span slot='keyPoints'>Bears are found on the continents of North America, South America, Europe, and Asia</span></span>.<!-- more content --></p>
  <p>While the polar bear is mostly carnivorous, <!-- more content -->. Bears use shelters, such as caves and logs, as their dens; <span><span slot='keyPoints'>Most species occupy their dens during the winter for a long period of hibernation</span></span>, up to 100 days.</p>
  <!-- More paragraphs --> 
</article>

Die wichtigsten Punkte sind in einem <span> umschlossen, der einen slot-Attributwert („keyPoints“) trägt, der dem name des <slot>-Platzhalters innerhalb des <template> entspricht.

Beachten Sie auch, dass ich **einen weiteren äußeren <span> hinzugefügt habe, der die wichtigsten Punkte umschließt.**

Der Grund dafür ist, dass Slot-Namen normalerweise eindeutig sind und nicht wiederholt werden, da *ein* <slot> *ein* Element mit *einem* Slot-Namen abgleicht. Wenn mehr als ein Element denselben Slot-Namen hat, wird der <slot>-Platzhalter durch alle diese Elemente nacheinander ersetzt, wobei das letzte Element der endgültige Inhalt an der Platzhalterposition ist.

Wenn wir also diesen einen einzelnen <slot> innerhalb des <template> mit *allen* <span>-Elementen mit demselben slot-Attributwert (unsere wichtigsten Punkte) in einem Absatz oder dem gesamten Artikel abgleichen würden, würden wir nur den letzten wichtigsten Punkt im Absatz oder Artikel anstelle des <slot> erhalten.

Das ist nicht das, was wir wollen. Wir wollen *alle* wichtigsten Punkte anzeigen. Deshalb umschließen wir die wichtigsten Punkte mit einem äußeren <span>, um jeden dieser einzelnen wichtigsten Punkte separat mit dem <slot> abzugleichen. Das wird durch einen Blick auf das Skript noch deutlicher, also tun wir das.

const keyPointsTemplate = document.querySelector('#keyPointsTemplate').content;
const keyPointsSection = document.querySelector('#keyPointsSection > ul');
/* Loop through elements with 'slot' attribute */
document.querySelectorAll('[slot]').forEach((slot)=>{
  let span = slot.parentNode.cloneNode(true);
  span.attachShadow({  mode: 'closed' }).appendChild(keyPointsTemplate.cloneNode(true));
  keyPointsSection.appendChild(span);
});

Zuerst durchlaufen wir jedes <span> mit einem slot-Attribut und erhalten eine Kopie seines Elternelements (des äußeren <span>). Beachten Sie, dass wir auch direkt das äußere <span> durchlaufen könnten, indem wir ihnen einen gemeinsamen class-Wert geben.

Die Kopie des äußeren <span> wird dann mit einem Shadow-Tree (span.attachShadow) verbunden, der aus einer Kopie des Template-Inhalts besteht (keyPointsTemplate.cloneNode(true)).

Diese "Anbindung" bewirkt, dass der <slot> innerhalb des Listenelements des Templates im Shadow-Tree den inneren <span> absorbiert, der seinen übereinstimmenden Slot-Namen trägt, d.h. unseren wichtigsten Punkt.

Der geslotete wichtigste Punkt wird dann am Ende der Seite dem Abschnitt der wichtigsten Punkte hinzugefügt (keyPointsSection.appendChild(span)).

Dies geschieht mit allen wichtigsten Punkten im Laufe der Schleife.

Das ist im Grunde alles. Wir haben alle wichtigsten Punkte des Artikels erfasst, Kopien davon gemacht und die Kopien dann in das Listen-Template eingefügt, sodass alle wichtigsten Punkte zusammengefasst werden und eine schöne, wie bei CliffsNotes, Zusammenfassung des Artikels liefern.

Hier ist diese Demo noch einmal

Siehe den Pen
Text Extraction with HTML Slot and HTML Template von Preethi Sam (@rpsthecoder)
auf CodePen.

Was halten Sie von dieser Technik? Wäre sie bei längeren Inhalten wie Blog-Posts, Nachrichtenartikeln oder sogar Wikipedia-Einträgen nützlich? Welche anderen Anwendungsfälle fallen Ihnen ein?