make type attribute optional

by setting it internally

Author: tobz-nz

demo.html

@@ -16,12 +16,12 @@
             <br>
 
             <label for="password_confirm">Confirm Password</label>
-            <input autocomplete="none" data-1p-ignore type="password" name="password_confirm" id="password_confirm" is="x-password" value="hidden" confirm-target="password">
+            <input autocomplete="none" data-1p-ignore name="password_confirm" id="password_confirm" is="x-password" value="hidden" confirm-target="password">
 
             <br>
 
             <label for="password_confirm">Visible Password</label>
-            <input autocomplete="none" data-1p-ignore type="password" name="visibile_password" id="visibile_password" is="x-password" value="not hidden" visible>
+            <input autocomplete="none" data-1p-ignore name="visibile_password" id="visibile_password" is="x-password" value="not hidden" visible>
 
             <br>
 

readme.md

@@ -1,5 +1,3 @@
-# <x-password>
-
 A password input natively enhanced via a Custom Element (Web Component).
 
 It adds the ability to toggle visibility and validation to confirm it matches the value of another field
@@ -11,7 +9,7 @@ It adds the ability to toggle visibility and validation to confirm it matches th
 ## Usage
 
 ```html
-<script src="" type="module"></script>
+<script src="https://tobz-nz.github.io/x-password/x-password.js" type="module"></script>
 
 <form onsubmit="return false">
     <label for="password">Password</label>
@@ -20,7 +18,7 @@ It adds the ability to toggle visibility and validation to confirm it matches th
     <br>
 
     <label for="password_confirm">Confirm Password</label>
-    <input type="password" name="password_confirm" id="password_confirm" is="x-password" confirm-target="password">
+    <input is="x-password" name="password_confirm" id="password_confirm" confirm-target="password">
 
     <br>  
 

x-password.js

@@ -1,6 +1,6 @@
 customElements.define('x-password', class extends HTMLInputElement {
     static get observedAttributes() {
-        return ["visible"]
+        return ['visible']
     }
 
     constructor() {
@@ -18,6 +18,10 @@ customElements.define('x-password', class extends HTMLInputElement {
     }
 
     connectedCallback() {
+        if (!this.getAttribute('type')) {
+            this.setAttribute('type', 'password')
+        }
+
         if (this.hasAttribute('confirm-target')) {
             const confirmTarget = document.getElementById(this.getAttribute('confirm-target'))