Improvements to build watcher (#7441)

* Remove fragment from _document

* Directly assign id instead of setAttribute

* Remove getElementById call by using the existing reference

packages/next/client/dev-build-watcher.js

 import { getEventSourceWrapper } from './dev-error-overlay/eventsource'
 
 export default function initializeBuildWatcher () {
-  const host = document.createElement('div')
-  host.id = '__next-build-watcher'
-  document.body.appendChild(host)
-
-  const shadowHost = document.getElementById('__next-build-watcher')
-  if (!shadowHost) return
-  let shadowRoot
-  let prefix = ''
-
+  const shadowHost = document.createElement('div')
+  shadowHost.id = '__next-build-watcher'
   // Make sure container is fixed and on a high zIndex so it shows
   shadowHost.style.position = 'fixed'
   shadowHost.style.bottom = '10px'
   shadowHost.style.right = '10px'
   shadowHost.style.zIndex = 99999
+  document.body.appendChild(shadowHost)
+
+  let shadowRoot
+  let prefix = ''
 
   if (shadowHost.attachShadow) {
     shadowRoot = shadowHost.attachShadow({ mode: 'open' })
@@ -91,7 +88,7 @@ export default function initializeBuildWatcher () {
 
 function createContainer (prefix) {
   const container = document.createElement('div')
-  container.setAttribute('id', `${prefix}container`)
+  container.id = `${prefix}container`
   container.innerHTML = `
     <div id="${prefix}icon-wrapper">
       <svg viewBox="0 0 226 200">

packages/next/pages/_document.tsx

@@ -371,11 +371,7 @@ export class Main extends Component {
   render() {
     const { amphtml, html } = this.context._documentProps
     if (amphtml) return '__NEXT_AMP_RENDER_TARGET__'
-    return (
-      <>
-        <div id="__next" dangerouslySetInnerHTML={{ __html: html }} />
-      </>
-    )
+    return <div id="__next" dangerouslySetInnerHTML={{ __html: html }} />
   }
 }