A form inside.
Actions outside.

Keep data controls inside the form; install submit handlers before enabling the buttons.

<rt-profile-form id="profile-form" data-reference-target="inner-form">
  <template shadowrootmode="open" shadowrootreferencetarget="inner-form">
    <form id="inner-form">
      <label for="email">Email</label>
      <input id="email" type="email" name="email" required>
    </form>
  </template>
</rt-profile-form>
<button id="submit-profile" type="submit" form="profile-form"
    name="intent" value="submit" disabled>Submit</button>
<button id="save-draft" type="submit" form="profile-form"
    name="intent" value="draft" formnovalidate disabled>Save draft</button>
<button id="reset-profile" type="reset" form="profile-form" disabled>Reset</button>

const form = document.getElementById('profile-form')
  .shadowRoot.getElementById('inner-form');

form.addEventListener('submit', event => {
  event.preventDefault();
  // Read synchronously: a fallback submitter exists only during dispatch.
  const data = new FormData(form, event.submitter);
  submitProfile(data); // Application-owned validation and transport.
});
for (const id of ['submit-profile', 'save-draft', 'reset-profile']) {
  document.getElementById(id).disabled = false;
}