Add attributes (#16)

README.md

@@ -30,6 +30,17 @@ Add the following to your website to show a button to start the provisioning pro
 
 A warning message will be rendered if the browser does not support WebBluetooth.
 
+### Attributes
+
+The following attributes are automatically added to `<improv-wifi-launch-button>` and can be used for styling:
+
+| Attribute | Description |
+| -- | -- |
+| `supported` | Added if this browser is supported
+| `unsupported` | Added if this browser is not supported
+
+### Slots
+
 It is possible to customize the button and the message. You do this by putting your elements inside the `<improv-wifi-launch-button>` element and adding the appropriate `slot` attribute. Use `activate` to replace the activation button and `unsupported` to replace the unsupported message:
 
 ```html

src/launch-button.ts

@@ -52,11 +52,15 @@ export class LaunchButton extends HTMLElement {
     this.renderRoot = this.attachShadow({ mode: "open" });
 
     if (!LaunchButton.isSupported || !LaunchButton.isAllowed) {
+      this.toggleAttribute("not-supported", true);
       this.renderRoot.innerHTML = !LaunchButton.isSupported
         ? "<slot name='unsupported'>Your browser does not support bluetooth provisioning. Use Google Chrome or Microsoft Edge.</slot>"
         : "<slot name='not-allowed'>You can only use Improv on HTTPS sites or localhost.</slot>";
       return;
     }
+
+    this.toggleAttribute("supported", true);
+
     this.addEventListener("mouseover", () => {
       // Preload
       import("./provision");