title: Electron title bar "no-drag" and "drag" not working
body: <p>I have a <code>#topleft</code> red title bar containing multiple &quot;tab&quot; buttons that should fill all the available space <em>except</em> a <code>#topright</code> blue block.<br />
  It is possible to move the main Electron window by click-and-dragging on <code>#topleft</code>'s red background, thanks to <code>-webkit-app-region: drag;</code>. This works.</p>
  <p><a href="https://i.stack.imgur.com/ZZPsJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZZPsJ.png" alt="enter image description here" /></a></p>
  <p><strong>Problems</strong>:</p>
  <ol>
  <li>clicks on <code>#topright</code> are ignored: <code>alert()</code> is not triggered  (same problem for child elements of this block)</li>
  <li><code>#topright span:hover { background-color: black; }</code> is ignored</li>
  <li><code>#topright { -webkit-app-region: no-drag; }</code> is ignored: we can still move the window by click-and-dragging on <code>#topright</code> whereas it should not</li>
  </ol>
  <p>However if we run the same HTML code <em>in a browser</em>, all is working correctly.</p>
  <p><strong>How to solve this in Electron?</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>for (var i = 0; i &lt; 50; i++)
  document.getElementById("topleft").innerHTML += "&lt;button&gt;xyz" + i + "&lt;/button&gt;";</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* { margin: 0; }
  #topright { float: right; width: 100px; background-color: blue; -webkit-app-region: no-drag; }
  #topright:hover { background-color: black; }
  #topleft { background-color: red; -webkit-app-region: drag; padding: 10px; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="topright" onclick="alert();"&gt;Click here!&lt;/div&gt;
  &lt;div id="topleft"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Note:</p>
  <ul>
  <li><p>I've already seen I've already seen <a href="https://stackoverflow.com/questions/35876939/frameless-window-with-controls-in-electron-windows">Frameless window with controls in electron (Windows)</a> but it doesn't help here.</p>
  </li>
  <li><p>Linked <a href="https://github.com/electron/electron/issues/27149" rel="nofollow noreferrer">issue</a></p>
  </li>
  </ul>