title: querySelector returns 'Failed to execute div is not a valid selector' when it exists in the DOM
body: <p>I'm running into an issue where the 'div ID' isn't valid when I run it from the code.</p>
  <p>However, when I <code>document.querySelector('#div-gpt-ad\\/1594654184865-0&gt;div')</code> it returns the correct div ID.
  Screenshot of error: <a href="https://gyazo.com/a7f1898f246bd84f28e85c2052ac60eb" rel="nofollow noreferrer">https://gyazo.com/a7f1898f246bd84f28e85c2052ac60eb</a></p>
  <p>The div id exists on page before executing the code, the console.log in the renderDiv function returns</p>
  <p>Here is the code I'm trying to execute:</p>
  <pre class="lang-cs prettyprint-override"><code>var slots = window.top.googletag.pubads().getSlots();
   
  init(slots);
  function init(slots) {
      for (let i = 0; i &lt; slots.length; i++) {
          renderDiv(slots[i]);
      }
  }
  function getSelectors(slot) {
      var escapeCheck = slot.getSlotElementId();
      if(escapeCheck.includes('/')){
         let placeHold = escapeCheck.replace(/\//g, '\\\\/');
  
          return  &quot;#&quot; + placeHold + &quot;&gt;div&quot; ;
      } else{ 
      return &quot;#&quot; + escapeCheck + &quot;&gt;div&quot;;
  }
  }
  function renderDiv(slot) {
          let selector = getSelectors(slot);
          
          console.log(&quot;Selector:&quot; + selector)
         document.querySelector(selector)
  
  }
  
  </code></pre>