[ts][webcomponents] Allow to style the webcomponent using class. Removed width/height attributes since direct style is possible.

spine-ts/spine-webcomponents/example/tutorial.html

@@ -280,12 +280,20 @@
 
         <div class="split-top split">
             <div class="split-left">
+                <style>
+                    .custom-class {
+                        width: 150px;
+                        height: 150px;
+                        border: 1px solid green;
+                        border-radius: 10px;
+                        box-shadow: -5px 5px 3px rgba(255, 0, 0, 0.3);
+                    }
+                </style>
                 <spine-skeleton
                     atlas="/assets/spineboy-pma.atlas"
                     skeleton="/assets/spineboy-pro.skel"
                     animation="walk"
-                    height="150"
-                    width="150"
+                    class="custom-class"
                 ></spine-skeleton>
                 <spine-skeleton
                     atlas="/assets/spineboy-pma.atlas"
@@ -301,10 +309,9 @@
                 ></spine-skeleton>
             </div>
             <div class="split-right">
-                If you want to manually size the Spine widget, specify the <code>width</code> and <code>height</code> attributes in pixels (without the "px" unit).
-                <br>
+                By default, the widget occupy zero width and height.
+                If you want to manually size the Spine widget, you can style the component using the <code>style</code> or <code>class</code> attribute, which provides more styling options.
                 <br>
-                If you prefer, you can style the component using the <code>style</code> attribute, which provides more styling options.
             </div>
         </div>
 

spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts

@@ -875,7 +875,7 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 	 * @returns The `HTMLElement` where the widget is hosted.
 	 */
 	public getHostElement (): HTMLElement {
-		return (this.width <= 0 || this.width <= 0) && !this.getAttribute("style")
+		return (this.width <= 0 || this.width <= 0) && !this.getAttribute("style") && !this.getAttribute("class")
 			? this.parentElement!
 			: this;
 	}
@@ -1075,22 +1075,13 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 	}
 
 	private render (): void {
-		let width;
-		let height;
-		if (this.width === -1 || this.height === -1) {
-			width = "0";
-			height = "0";
-		} else {
-			width = `${this.width}px`
-			height = `${this.height}px`
-		}
+		let noSize = (!this.getAttribute("style") && !this.getAttribute("class"));
 		this.root.innerHTML = `
         <style>
             :host {
                 position: relative;
                 display: inline-block;
-                width:  ${width};
-                height: ${height};
+				${noSize ? "width: 0; height: 0;" : ""}
             }
         </style>
         `;