Display ads in the shadow DOM

The shadow DOM lets you attach a DOM tree to an element, and have the internals of that tree isolated from the rest of the page. By default, any elements created inside of the shadow DOM are inaccessible to JS and CSS running on the main page.

When the Google Publisher Tag (GPT) library is loaded on the main page, it's capable of rendering ads into containers within the shadow DOM, if the following requirements are met:

  1. The shadow DOM is attached in open mode.
  2. Calls to googletag.display() provide a reference to an ad container element, instead of a DOM ID string.

Sample implementation

View demo

JavaScript

Loading...

TypeScript

Loading...