Address feedback: Move to a static method

Author: DmitrySharabin

src/color-swatch/color-swatch.js

@@ -24,8 +24,6 @@ const Self = class ColorSwatch extends ColorElement {
 			<slot name="after"></slot>
 		</div>`;
 
-	static resolvedColors = new Map();
-
 	constructor () {
 		super();
 
@@ -209,13 +207,7 @@ const Self = class ColorSwatch extends ColorElement {
 					return null;
 				}
 
-				try {
-					return ColorSwatch.Color.get(this.value);
-				}
-				catch {
-					// Color.js can't parse the color value; possibly one of the values we can handle gracefully
-					return resolveColor(this.value, this._el.swatch, Self.resolvedColors);
-				}
+				return Self.resolveColor(this.value, this._el.swatch);
 			},
 			set (value) {
 				this.value = ColorSwatch.Color.get(value)?.display();

src/common/color-element.js

@@ -31,6 +31,7 @@ const Self = class ColorElement extends NudeElement {
 	static Color;
 	static all = {};
 	static dependencies = new Set();
+	static resolvedColors = new Map();
 
 	static globalStyles = [{ css: baseGlobalStyles }];
 
@@ -137,6 +138,31 @@ const Self = class ColorElement extends NudeElement {
 
 		customElements.define(this.tagName, this);
 	}
+
+	static resolveColor (value, element) {
+		try {
+			return Self.Color.get(value);
+		}
+		catch {
+			// Color.js can't parse the color value; possibly one of the values we can handle gracefully
+			if (Self.resolvedColors.has(value)) {
+				return Self.resolvedColors.get(value);
+			}
+
+			if (!CSS.supports("color", value)) {
+				// Not supported or invalid value
+				return null;
+			}
+
+			// One of the supported color values; resolve and cache it
+			element.style.backgroundColor = value;
+			let color = getComputedStyle(element).backgroundColor;
+			Self.resolvedColors.set(value, color);
+			element.style.backgroundColor = "";
+
+			return color;
+		}
+	}
 };
 
 export default Self;