Merge pull request #194 from LottieFiles/feat/disable-shadow-dom-prop

feat: added disable shadow dom prop
LottieFiles · Jan 30, 2023 · 6c222e7 · 6c222e7
2 parents c098e7c + 2285325
commit 6c222e7
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lottiefiles/lottie-player",
-  "version": "1.6.3",
+  "version": "1.7.0",
   "description": "Lottie animation and Telegram Sticker player web components.",
   "main": "dist/lottie-player.js",
   "module": "dist/lottie-player.esm.js",

diff --git a/src/index.html b/src/index.html
@@ -1,20 +1,61 @@
 <html>
-  <head> </head>
+  <head>
+    <style type="text/css">
+      #animation-container {
+        background: red;
+      }
+      #player-one {
+        background: green;
+      }
+      .arm-l path {
+        fill: purple;
+      }
+
+      .body path {
+        fill: red;
+      }
+
+      .leg-l path {
+        fill: orange;
+      }
+
+      .leg-r path {
+        fill: orange;
+      }
+
+      .arm-r path {
+        fill: turquoise;
+        stroke-width: 8;
+        stroke: pink;
+        stroke-linecape: round;
+      }
+    </style>
+  </head>
   <body>
     <div
       class="player-container"
       style="width: 500px; height: 500px; margin: auto; justify-content: center"
     >
       <lottie-player
-        src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
+        src="https://lottie.host/4458c0b5-4d8d-43f3-8d42-0739a212a523/L4yrEGvBsO.json"
         autoplay
         controls
         loop
         disableCheck
         mode="normal"
-        viewBoxSize="0 0 50 600"
         style="width: 320px"
         id="player-one"
+        disableShadowDOM
+      ></lottie-player>
+
+      <lottie-player
+        src="https://lottie.host/4458c0b5-4d8d-43f3-8d42-0739a212a523/L4yrEGvBsO.json"
+        autoplay
+        controls
+        loop
+        disableCheck
+        mode="normal"
+        style="width: 320px"
       ></lottie-player>
     </div>
 

diff --git a/src/lottie-player.ts b/src/lottie-player.ts
@@ -153,6 +153,12 @@ export class LottiePlayer extends LitElement {
   @property({ type: Boolean })
   public disableCheck?: boolean = false;
 
+  /**
+   * Disable using shadow dom as the root
+   */
+  @property({ type: Boolean })
+  public disableShadowDOM: boolean = false;
+
   /**
    * Whether to play on mouse hover
    */
@@ -239,10 +245,6 @@ export class LottiePlayer extends LitElement {
    * Configure and initialize lottie-web player instance.
    */
   public async load(src: string | object) {
-    if (!this.shadowRoot) {
-      return;
-    }
-
     const options: any = {
       container: this.container,
       loop: false,
@@ -562,10 +564,18 @@ export class LottiePlayer extends LitElement {
           ? html`<div class="error">⚠️</div>`
           : undefined}
       </div>
-      ${this.controls ? this.renderControls() : undefined}
+      ${this.controls && !this.disableShadowDOM
+        ? this.renderControls()
+        : undefined}
     </div>`;
   }
 
+  protected createRenderRoot(): Element | ShadowRoot {
+    this.style.display = "block";
+
+    return this.disableShadowDOM ? this : super.createRenderRoot();
+  }
+
   /**
    * Initialize everything on component first render.
    */

diff --git a/src/versions.ts b/src/versions.ts
@@ -1,2 +1,2 @@
-export const LOTTIE_PLAYER_VERSION = "1.6.2"; 
+export const LOTTIE_PLAYER_VERSION = "1.7.0";
 export const LOTTIE_WEB_VERSION = "^5.10.0";