title: Is it good practice to create custom HTML attributes for custom elements?
body: <p>When creating a custom element like <code>&lt;input-field&gt;</code>, should custom attributes still use the 'data-' prefix or would it be acceptable to simply use them as-is? Basically using <code>variation=&quot;abc&quot;</code> vs <code>data-variation=&quot;abc&quot;</code> for example.<br />
  And if it is allowed, would re-using existing attributes like <code>type</code> be allowed?</p>
  <p>In addition, would it be bad practice to add custom properties to the element's object during creation like the following:</p>
  <pre class="lang-js prettyprint-override"><code>class InputFieldElement extends HTMLElement {
      constructor() {
          super();
  
          this.customProperty = {data: 123};
      }
  }
  customElements.define('input-field', InputFieldElement);
  </code></pre>
  <p>I'm aware that these methods work perfectly fine right now, but the question is more if it's actually intended behavior or if it's just a weird edge-case that could stop working at any moment.</p>