实现组件随容器自适应

src/components/battery/battery-styles.ts

@@ -1,12 +1,13 @@
 import {css, CSSResult} from 'lit'
 export const sharedStyles: CSSResult = css`
-  .holder {
-    position: relative;
-    width: var(--battery-width, 100%);
-    height: 0;
-    padding: 0;
-    padding-bottom: 35.4%;
-  }
+  // .holder {
+  //   position: relative;
+  //   width: var(--battery-width, 100%);
+  //   height: 0;
+  //   padding: 0;
+  //   padding-bottom: 35.4%;
+  // }
+  
   .container {
     display: flex;
     position: absolute;

src/components/battery/battery.ts

@@ -92,13 +92,11 @@ export class StarBattery extends LitElement {
 
   render() {
     return html`
-      <div class="holder">
-        <div class="container">
-          <div class="power"></div>
-          <span class="number">${Math.round(this.percent)}</span>
-          <span class="percent">%</span>
-          <img src="${lightning}" class="lightning" />
-        </div>
+      <div class="container">
+        <div class="power"></div>
+        <span class="number">${Math.round(this.percent)}</span>
+        <span class="percent">%</span>
+        <img src="${lightning}" class="lightning" />
       </div>
     `
   }