Add attributes to reflect support status

README.md

@@ -45,6 +45,15 @@ Allows for optionally passing an attribute to trigger an erase before installati
 
 All attributes can also be set via properties (`manifest`, `eraseFirst`)
 
+## Styling
+
+The following attributes are automatically added to `<esp-web-install-button>`:
+
+| Attribute | Description |
+| -- | -- |
+| `install-supported` | Added if installing firmware is supported
+| `install-unsupported` | Added if installing firmware is not supported
+
 ## Development
 
 Run `script/develop`. This starts a server. Open it on http://localhost:5000.

src/install-button.ts

@@ -13,11 +13,13 @@ class InstallButton extends HTMLElement {
     this.renderRoot = this.attachShadow({ mode: "open" });
 
     if (!InstallButton.isSupported) {
+      this.setAttribute("install-unsupported", "");
       this.renderRoot.innerHTML =
         "<slot name='unsupported'>Your browser does not support installing things on ESP devices. Use Google Chrome or Microsoft Edge.</slot>";
       return;
     }
 
+    this.setAttribute("install-supported", "");
     this.addEventListener("mouseover", () => {
       // Preload
       import("./start-flash");