Chapter names in books, quotes from a speech, keywords in an article, stats on a report — these are all types of content that could be helpful to isolate and turn into a high-level summary of what’s important.

For example, have you seen the way Business Insider provides an article’s key points before getting into the content?

That’s the sort of thing we’re going to do, but try to extract the high points directly from the article using HTML Slot, HTML Template and Shadow DOM.

These three titular specifications are typically used as part of Web Components — fully functioning custom element modules meant to be reused in webpages.

Now, what we aim to do, i.e. text extraction, doesn’t need custom elements, but it can make use of those three technologies.

There is a more rudimentary approach to do this. For example, we could extract text and show the extracted text on a page with some basic script without utilizing slot and template. So why use them if we can go with something more familiar?

The reason is that using these technologies permits us a preset markup code (also optionally, style or script) for our extracted text in HTML. We’ll see that as we proceed with this article.

Now, as a very watered-down definition of the technologies we’ll be using, I’d say:

A template is a set of markup that can be reused in a page.

A slot is a placeholder spot for a designated element from the page.

A shadow DOM is a DOM tree that doesn’t really exist on the page till we add it using script.

We’ll see them in a little more depth once we get into coding. For now, what we’re going to make is an article that follows with a list of key points from the text. And, you probably guessed it, those key points are extracted from the article text and compiled into the key points section.

The key points are displayed as a list with a design in between the points. So, let’s first create a template for that list and designate a place for the list to go.

Key Points:

⤙—⤚

What we’ve got is a semantic

with a

where the list of key points will go. Then we have a for the list items that has two

elements: one with a placeholder for the key points from the article and another with a centered design.

The layout is arbitrary. What’s important is placing a where the extracted key points will go. Whatever’s inside the will not be rendered on the page until we add it to the page using script.

Further, the markup inside can be styled using inline styles, or CSS enclosed by

:

⤙—⤚

The fun part! Let’s pick the key points from the article. Notice the value of the name attribute for the inside the (keyPoints) because we’ll need that.

Bears

Bears are carnivoran mammals of the family Ursidae. They are classified as caniforms, or doglike carnivorans. Although only eight species of bears and partially in the Southern Hemisphere. Bears are found on the continents of North America, South America, Europe, and Asia.

While the polar bear is mostly carnivorous, . Bears use shelters, such as caves and logs, as their dens; Most species occupy their dens during the winter for a long period of hibernation, up to 100 days.

The key points are wrapped in a carrying a slot attribute value (“keyPoints“) matching the name of the placeholder inside the .

Notice, too, that I’ve added another outer wrapping the key points.

The reason is that slot names are usually unique and are not repeated, because one matches one element using one slot name. If there’re more than one element with the same slot name, the placeholder will be replaced by all those elements consecutively, ending in the last element being the final content at the placeholder.

So, if we matched that one single inside the against all of the elements with the same slot attribute value (our key points) in a paragraph or the whole article, we’d end up with only the last key point present in the paragraph or the article in place of the .

That’s not what we need. We need to show all the key points. So, we’re wrapping the key points with an outer to match each of those individual key points separately with the . This is much more obvious by looking at the script, so let’s do that.

This “attachment” causes the inside the template’s list item in the shadow tree to absorb the inner carrying its matching slot name, i.e. our key point.

The slotted key point is then added to the key points section at the end of the page (keyPointsSection.appendChild(span)).

This happens with all the key points in the course of the loop.

That’s really about it. We’ve snagged all of the key points in the article, made copies of them, then dropped the copies into the list template so that all of the key points are grouped together providing a nice little CliffsNotes-like summary of the article.