title: JavaScript `document.execCommand('copy')` appears successful (returns `true`), but does not write anything to clipboard
body: <p>I am trying to copy a text value from a hidden element to the user clipboard when the user clicks a button.</p>
  
  <p>I'm using ES6, processed with Webpack and Grunt.</p>
  
  <p>These are the articles I've used for reference:</p>
  
  <p><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Interact_with_the_clipboard" rel="nofollow noreferrer">MDN: Interact with the clipboard</a></p>
  
  <p><a href="https://developers.google.com/web/updates/2015/04/cut-and-copy-commands" rel="nofollow noreferrer">Google: Cut and Copy Commands</a></p>
  
  <p>I am using <code>document.execCommand('copy')</code>. I do not know about any browser compatibility issues with this method, yet.</p>
  
  <p>Here is the relevant markup:</p>
  
  <pre><code>&lt;div class="icon-link"&gt;
    &lt;a href=""&gt;
      &lt;svg id="copy_button" ... /&gt;&lt;/svg&gt;
    &lt;/a&gt;
  
    &lt;p id="copy_confirm"&gt;Copy Link&lt;/p&gt;
  &lt;/div&gt;
  
  ...
  
  &lt;p id="copy_text" style="display:none;"&gt;[text content to copy]&lt;/p&gt;
  </code></pre>
  
  <p>And here is the relevant JavaScript:</p>
  
  <pre><code>const copyBtn = document.getElementById('copy_button');
  const copyText = document.getElementById('copy_text');
  
  const copyLink = (e) =&gt; {
    e.preventDefault();
  
    const range = document.createRange();
    range.selectNode(copyText);
    window.getSelection().addRange(range);
  
    try {
      const successful = document.execCommand('copy');
  
      const msg = successful ? 'successful' : 'unsuccessful';
      global.console.log(`Copy command was ${msg}`);
    } catch (err) {
      global.console.log('Oops, unable to copy');
    }
  
    window.getSelection().removeAllRanges();
  };
  
  doc.addEventListener('DOMContentLoaded', () =&gt; {
    copyBtn.addEventListener('click', copyLink);
  });
  </code></pre>
  
  <p>When I click the button, I see the "successful" message in the console. I can verify by running this code manually in the console that selecting the element and executing <code>document.execCommand('copy')</code> returns <code>true</code>. </p>
  
  <p>But the contents of my clipboard are not changing.</p>
  
  <p>I've verified that the page is rendering with the correct text value in the hidden element.</p>
  
  <p>I've tried changing the structure of the markup to different element types, and the styling to show the element instead of hiding it; these had no effect.</p>
  
  <p>I've tried using both the <code>Element.select()</code> approach from the MDN article above, and the <code>Range</code>-based approach from the Google article (shown here); both exhibit the same behavior.</p>
  
  <p>I've seen some other questions about using <code>document.execCommand()</code>, but all of them seem to deal with problems related to the function returning <code>false</code>. I haven't found any that address the behavior I'm seeing.</p>
  
  <p>I've tested in recent Chrome and Firefox.</p>
  
  <p>Can you help me understand why the contents of my clipboard are not changing?</p>