Untitled fiddle

HTML

<style>
  #displayAdCard { height: 250px; background: #fde68a; }
</style>

<div class="content">Outside: page content</div>
<div id="displayAdCard">Outside: page ad (a regular ## rule's job)</div>

<div id="host">
  <template shadowrootmode="open">
    <style>
      #displayAdCard { height: 250px; background: #fde68a; }
    </style>
    <span>I'm in the shadow DOM</span>
    <div class="content">Inside: shadow DOM content</div>
    <div id="displayAdCard">Inside: ad card in the declarative shadow root</div>
  </template>
</div>

<script>
  // Created by the browser's HTML parser: attachShadow is never called for it.
  const declarativeRoot = document.getElementById('host').shadowRoot;
  const adCard = declarativeRoot.getElementById('displayAdCard');

  // adCard is already connected, so adCard.getRootNode() === declarativeRoot
  // when attachShadow runs. The <slot> keeps adCard's own text rendered.
  adCard.attachShadow({ mode: 'open' }).innerHTML = `
    <slot></slot>
    <div id="adBanner">Nested: ad banner in the attached shadow root</div>
  `;

  const nestedRoot = adCard.shadowRoot;
  const isRendered = (element) => element.getClientRects().length > 0;

  console.table({
    'outside content': isRendered(document.querySelector('.content')),
    'outside #displayAdCard': isRendered(document.getElementById('displayAdCard')),
    'inside content': isRendered(declarativeRoot.querySelector('.content')),
    'inside #displayAdCard': isRendered(adCard),
    'nested #adBanner': isRendered(nestedRoot.getElementById('adBanner'))
  });
</script>