modify

src/components/battery/battery.ts

@@ -10,7 +10,7 @@ export class StarBattery extends LitElement {
 
   @property({type: Boolean}) deep = false
 
-  @property({type: Boolean}) charge = false
+  @property({type: Boolean, reflect: true}) charge = false
 
   @query('.power') _power: any
 
@@ -18,18 +18,35 @@ export class StarBattery extends LitElement {
 
   @property({type: Boolean}) vertical = false
 
-  @property({type: Number}) percent = 22
+  @property({type: Number, reflect: true}) percent = 22
+
+  static get observedAttributes() {
+    return ['charge', 'percent']
+  }
+
+  attributeChangedCallback(name: string, oldValue: any, newValue: any) {
+    console.log(name, oldValue, newValue)
+
+    switch (name) {
+      case 'charge':
+        if (newValue !== null) {
+          for (var i = 0; i < 20; i++) {
+            const bubbles = document.createElement('span')
+            bubbles.className = 'bubbles'
+            this._power.append(bubbles)
+          }
+        } else {
+          this._power.innerHTML = ''
+        }
+        break
+    }
+  }
 
   protected firstUpdated(): void {
     if (this.charge == true) {
       var power = this._power
       power.style.right = this.percent + '%'
       this._percent.style.left = '29%'
-      for (var i = 0; i < 20; i++) {
-        const bubbles = document.createElement('span')
-        bubbles.className = 'bubbles'
-        power.append(bubbles)
-      }
 
       if (this.percent == 0) {
         this._percent.style.left = '32%'

src/test/panels/battery/battery.ts

@@ -1,19 +1,30 @@
-import {html, LitElement, CSSResultArray} from 'lit'
-import {customElement} from 'lit/decorators.js'
+import {html, LitElement, CSSResultArray, css} from 'lit'
+import {customElement, query} from 'lit/decorators.js'
 import {sharedStyles} from '../../../components/battery/battery-styles'
 
 @customElement('panel-battery')
 export class PanelBattery extends LitElement {
+  @query('#container') container!: HTMLElement
   render() {
     return html`
-      <star-battery></star-battery>
+      <div id="container">
+        <star-battery></star-battery>
+      </div>
       <!-- <star-battery deep></star-battery> -->
       <!-- <star-battery charge></star-battery> -->
     `
   }
 
   public static override get styles(): CSSResultArray {
-    return [sharedStyles]
+    return [
+      sharedStyles,
+      css`
+        #container {
+          height: 100px;
+          width: 100px;
+        }
+      `,
+    ]
   }
 }