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.
See the Pen
Text Extraction with HTML Slot and HTML Template by Preethi Sam (@rpsthecoder)
on CodePen.
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