From 625fa87ec42f17b096fde160da521a0485b1ec35 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Mon, 7 Jun 2021 05:41:03 +0000
Subject: [PATCH] Add attributes to reflect support status

---
 README.md             | 9 +++++++++
 src/install-button.ts | 2 ++
 2 files changed, 11 insertions(+)

diff --git a/README.md b/README.md
index ea13ab8..83c2b31 100644
--- a/README.md
+++ b/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.
diff --git a/src/install-button.ts b/src/install-button.ts
index ed7219c..7637bcd 100644
--- a/src/install-button.ts
+++ b/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");