Improve the behavior of the `<fa-icon>` name attribute

diff --git a/ts/WoltLabSuite/WebComponent/fa-icon.ts b/ts/WoltLabSuite/WebComponent/fa-icon.ts
index 2df931ed6dc274115caaac6f22771b34a0215b9d..39509326a6a2f06e45ce4a126c015855313e5815 100644 (file)
--- a/ts/WoltLabSuite/WebComponent/fa-icon.ts
+++ b/ts/WoltLabSuite/WebComponent/fa-icon.ts
@@ -69,6 +69,10 @@
       if (!isSolid && isFontAwesome6Free()) {
         const [, styles] = window.getFontAwesome6IconMetadata(name)!;
         if (!styles.includes("regular")) {
+          // Font Awesome 6 Free only includes solid icons with the
+          // the exception to some special icons that use the weight
+          // to differentiate two related icons. One such example is
+          // the `bell` icon that comes in `solid` and `regular` flavor.
           return false;
         }
       }
@@ -92,16 +96,6 @@
       root.append(codepoint);
     }
 
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {
-      switch (name) {
-        case "name":
-          if (newValue !== null && this.isValidIconName(newValue)) {
-            this.updateIcon();
-          }
-          break;
-      }
-    }
-
     get solid(): boolean {
       return this.hasAttribute("solid");
     }
@@ -119,7 +113,12 @@
     }
 
     set name(name: string) {
+      if (!this.isValidIconName(name)) {
+        throw new Error(`Refused to set the unknown icon name '${name}'.`);
+      }
+
       this.setAttribute("name", name);
+      this.updateIcon();
     }
 
     get size(): IconSize {
@@ -138,10 +137,6 @@
 
       this.setAttribute("size", size.toString());
     }
-
-    static get observedAttributes() {
-      return ["name"];
-    }
   }
 
   window.customElements.define("fa-icon", FaIcon);

diff --git a/wcfsetup/install/files/js/WoltLabSuite/WebComponent/fa-icon.js b/wcfsetup/install/files/js/WoltLabSuite/WebComponent/fa-icon.js
index 044de90923ddca1cf57434da102ac7e739014685..ceceabcc467f6ef541ddec1f620edbb7ec47c593 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/WebComponent/fa-icon.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/WebComponent/fa-icon.js
@@ -58,6 +58,10 @@
             if (!isSolid && isFontAwesome6Free()) {
                 const [, styles] = window.getFontAwesome6IconMetadata(name);
                 if (!styles.includes("regular")) {
+                    // Font Awesome 6 Free only includes solid icons with the
+                    // the exception to some special icons that use the weight
+                    // to differentiate two related icons. One such example is
+                    // the `bell` icon that comes in `solid` and `regular` flavor.
                     return false;
                 }
             }
@@ -76,15 +80,6 @@
             const [codepoint] = window.getFontAwesome6IconMetadata(this.name);
             root.append(codepoint);
         }
-        attributeChangedCallback(name, oldValue, newValue) {
-            switch (name) {
-                case "name":
-                    if (newValue !== null && this.isValidIconName(newValue)) {
-                        this.updateIcon();
-                    }
-                    break;
-            }
-        }
         get solid() {
             return this.hasAttribute("solid");
         }
@@ -100,7 +95,11 @@
             return this.getAttribute("name") || "";
         }
         set name(name) {
+            if (!this.isValidIconName(name)) {
+                throw new Error(`Refused to set the unknown icon name '${name}'.`);
+            }
             this.setAttribute("name", name);
+            this.updateIcon();
         }
         get size() {
             const size = this.getAttribute("size");
@@ -115,9 +114,6 @@
             }
             this.setAttribute("size", size.toString());
         }
-        static get observedAttributes() {
-            return ["name"];
-        }
     }
     window.customElements.define("fa-icon", FaIcon);
 })();