在 shadow DOM 中显示广告

借助 shadow DOM,您可以将 DOM 树附加到元素,并将该树的内部结构与页面的其余部分隔离开来。默认情况下,主页面上运行的 JS 和 CSS 无法访问 shadow DOM 内部创建的任何元素。

在主页面上加载 Google 发布商代码 (GPT) 库时,如果满足以下要求,则能够在 shadow DOM 内的容器中将广告呈现到容器中:

  1. shadow DOM 在打开模式下附加。
  2. 调用 googletag.display() 会提供对广告容器元素的引用,而非 DOM ID 字符串。

实现示例

观看演示