Stay organized with collections
Save and categorize content based on your preferences.
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:
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[],null,["# Display ads in the shadow DOM\n=============================\n\nThe [shadow DOM](//developer.mozilla.org/docs/Web/API/Web_components/Using_shadow_DOM) lets you attach a DOM tree to an element, and have\nthe internals of that tree isolated from the rest of the page. By default, any\nelements created inside of the shadow DOM are inaccessible to JS and CSS running\non the main page.\n\nWhen the Google Publisher Tag (GPT) library is loaded on the main page, it's\ncapable of rendering ads into containers within the shadow DOM, if the following\nrequirements are met:\n\n1. The shadow DOM is attached in [open mode](//developer.mozilla.org/docs/Web/API/Web_components/Using_shadow_DOM#element.shadowroot_and_the_mode_option).\n2. Calls to [`googletag.display()`](//developers.google.com/publisher-tag/reference#googletag.display) provide a reference to an ad container element, instead of a DOM ID string.\n\nSample implementation\n---------------------\n\n[View demo](https://googleads.github.io/google-publisher-tag-samples/shadow-dom/js/demo.html) \n\n### JavaScript\n\nLoading...\n----------\n\nLoading...\n----------\n\n[Improve this sample](https://github.com/googleads/google-publisher-tag-samples/tree/main/dist/shadow-dom/js) [Report an issue](https://github.com/googleads/google-publisher-tag-samples/issues/new?labels=documentation&template=sample-feedback.md&title=Sample+feedback%3A+shadow-dom/js)\n\n### TypeScript\n\nLoading...\n----------\n\nLoading...\n----------\n\n[Improve this sample](https://github.com/googleads/google-publisher-tag-samples/tree/main/dist/shadow-dom/ts) [Report an issue](https://github.com/googleads/google-publisher-tag-samples/issues/new?labels=documentation&template=sample-feedback.md&title=Sample+feedback%3A+shadow-dom/ts)"]]