title: Clear lightning-input and lightning-textarea on click?
body: <p>Looking to reset the two text fields labeled 'Name' and 'Description' when the 'Cancel' button is clicked. However, I'm getting the error ' [document.getElementById(...) is null]'. After some research, I've learned this error appears when the JS is within the same file as the HTML, but this JS is in a separate file and is nested within the button click, so the fields already exist. I've tried setting the value to a blank string, as well as resetting it using the .reset() method.</p>
  <p>The HTML:</p>
  <pre><code>&lt;lightning-input label=&quot;Name&quot; id=&quot;nameInput&quot; name=&quot;nameInput&quot;&gt;&lt;/lightning-input&gt;
  &lt;lightning-textarea label=&quot;Description&quot; id=&quot;descriptionInput&quot; name=&quot;descriptionInput&quot;&gt;&lt;/lightning-textarea&gt;
  &lt;lightning-button label=&quot;Cancel&quot; onclick={cancelStep}&gt;&lt;/lightning-button&gt;
  </code></pre>
  <p>The JS:</p>
  <pre><code>cancelStep(){
      document.getElementById('nameInput').value = '';
      document.getElementById('descriptionInput').value = '';
      //document.getElementById('nameInput').reset();
      //document.getElementById('descriptionInput').reset();
  }
  </code></pre>