Jonathan Cartu Announces: What We Do in the Shadow DOM - Jonathan Cartu - Advertisement & Marketing Agency.
post-template-default,single,single-post,postid-16841,single-format-standard,qode-quick-links-1.0,ajax_fade,page_not_loaded,,qode-theme-ver-11.2,qode-theme-bridge,wpb-js-composer js-comp-ver-5.2.1,vc_responsive

Jonathan Cartu Announces: What We Do in the Shadow DOM

Jamie Alberico

Jonathan Cartu Announces: What We Do in the Shadow DOM

Technical SEO can be a bit scary. It’s got fangs.

To defeat technical SEO monsters, you’ve got to venture into the caves and castles of codebases – sometimes only with a wooden stake in hand.

For this adventure, I’ve recruited SEO savvy developer and professional goth Dave Smart to shine a little light into one of the scariest slices of technical SEO: the Shadow DOM.

Why Does the ShadowDOM Matter?

Like most things, you’ll only care about the SEO monsters likely to show their heads in your world.

I’ve dove fairly deep into the abyss of Rendering, Angular, and performance metrics but this… this is the catacombs of technical SEO, my friend.

You’ll find practical value in learning about the Shadow DOM if/when you’re working with a site that uses Web Components or JavaScript frameworks.

Or you’re staring at a page source that looks like one of these spooky skeletons.

<section id="root"></section>

<section id="root">

You’ll care because the Shadow DOM has a bit of a habit of sucking content into it before disappearing into the nether realm.

“When Googlebot renders a page, it flattens the shadow DOM and light DOM content. This means Googlebot can only see content that’s visible in the rendered HTML… If the content isn’t visible in the rendered HTML, Googlebot won’t be able to index it.” – Understand the JavaScript SEO Basics, Search for Developers

We’ll rephrase this and project a little louder for those in the back of the castle:

If our content isn’t indexed, our content can’t rank.

What We Do in the Shadow DOM

Dungeons & DOMs

Before we head into the crypts, you’ll need to know what a DOM is.

DOM is an acronym for Document Object Model.

The DOM is built with every page request.

Sometimes when the DOM construction goes wrong, the page doesn’t look right.

Other times it assembles slowly prompting panic from an overly concerned but well-intended coworker.

Let’s look at the process that transmutes HTML to the DOM:

  • A request is made.
  • The requestor receives an initial HTML response (You can see this by right-clicking and selecting View Page Source).
  • The requestor assembles as much of the page as possible and queues up the resources required to render the page.
    Noteworthy: Google refers to the output of this process as the “Crawled DOM.”
  • The HTML (a.k.a. Crawled DOM) is passed through a DOMparser, either in the browser or via web rendering service.
  • The HTML and resources are converted to a DOM Document, a representation of the content of the page.

What’s in the DOM?

The HTML is represented in the DOM by a series of nested objects called nodes.

Each node can contain content or child nodes.

It’s like the relationship between sitemaps and sitemap indexes.

Most modern browsers are optimized for 1,500 nodes.

This labyrinthian collection of nodes is known as a DOM tree.

dom tree visualized

We can manipulate and interact with a DOM tree.

This can look like:

  • Exposing nodes (think hamburger menus and accordions).
  • Changing the content (forms).
  • Hiding nodes (dismissing a banner ad).

It’s an important concept because it’s this DOM, not the initial HTML that is served up that defines what you see in the browser, and by extension, what search engines that render pages (like Google!) will index and rank you on.

How Do I See the DOM?

Chrome devTools gives you a great, human-friendly way to see the DOM tree.

  • Navigate to a page you want to peek at.
  • Hit Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS). This will open devTools to the elements panel, and you can see the elements of your page, all nicely nested.
  • Hover over an element in the panel will highlight it on the page.
  • Look a the bottom of the console to see how that element is nested in the DOM tree

What We Do in the Shadow DOM

Visualize the DOM Tree in Search Console

To see the entire DOM Tree and its structure at once, we only need to cast a bit of magic in the dev tools console.

  • Open the Dev Tools Console with Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS) to open the console.
  • Copy and paste the incantation console.log(document.documentElement.childNodes).
  • Hit enter.
    viewing the DOM tree in console
  • Click an arrow. You’ve expands that node! Nodes can contain their own unique content and children. If you click on any piece of blue anchor text in the DOM tree, you’ll switch over to viewing the node in the Element panels of devTools.traversing the DOM in dev tools

You can repeat this process over and over, exploring all the branches and loot crates to be had because you’ve learned how to traverse the DOM!

If this scary-looking stuff is a bit more than you bargained for, that’s OK.

It isn’t really meant to be human fodder.

This is the skeleton and the squishy bits that make up a page.

It’s the content, structure, and styling and how they are related and apply to each other.

Light vs. Shadow

If you followed along with the steps to inspect the DOM, you saw the “Light DOM.”

It’s only referred to as the Light DOM when there’s a shadow involved.

A shadow DOM is a whole new DOM tree that is attached to an element, its shadow host, in the Light DOM.

That’s right – just as one light can cast many shadows, one Light DOM can involve multiple Shadow DOMs.

Shadow DOM visualized

How Is the Shadow DOM Used?

Shadows DOMs are really helpful.

Many browsers use them for native widgets, like <select> or <video>.

(Yes, there’s a shadow DOM lurking behind these elements!)

Let’s pretend we have an ecommerce site and we want to build a category page.

We could mark up the page like this:

<div class="col">
<h2><a href="thing_1.html" class="title">Thing 1</a></h2>
<img src="" alt="lovely green thing" class="responsive">
<p>Thing 1 is like Thing 2 but green</p>
<a href="thing_1.html" class="buttonstyle">Details</a>
<button onclick="addtocart('thing1')" class="buttonstyle">Buy Now</button>
<div class="col">
<h2><a href="thing_2.html" class="title">Thing 2</a></h2>
<img src="" alt="lovely red thing">
<p>Thing 2 is like Thing 1 but red</p>

Airo AV

No Comments

Post A Comment