[amp-story-player] Add ShadowDOM fallback for edge (#30254)

* fallback for edge * tweak css * fix specificity, use display none * rename CSS class
ampproject · Sep 23, 2020 · f31bb10 · f31bb10
1 parent d86aa42
commit f31bb10
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 21 deletions.
diff --git a/css/amp-story-player-iframe.css b/css/amp-story-player-iframe.css
@@ -14,15 +14,6 @@
  * limitations under the License.
  */
 
-:host {
-  all: initial;
-  display: block;
-  border-radius: 0 !important;
-  width: 360px;
-  height: 600px;
-  overflow: auto;
-}
-
 .story-player-iframe {
   height: 100%;
   width: 100%;
@@ -33,7 +24,7 @@
   position: absolute;
 }
 
-main {
+.i-amphtml-story-player-main-container {
   height: 100%;
   position: relative;
   overflow: hidden;
@@ -45,18 +36,18 @@ main {
   transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-iframe:nth-of-type(1),
-main .story-player-iframe[i-amphtml-iframe-position="0"] {
+.i-amphtml-story-player-main-container iframe:nth-of-type(1),
+.i-amphtml-story-player-main-container .story-player-iframe[i-amphtml-iframe-position="0"] {
   transform: translate3d(0, 0, 1px);
 }
 
-iframe:nth-of-type(2),
-iframe:nth-of-type(3),
-main .story-player-iframe[i-amphtml-iframe-position="1"] {
+.i-amphtml-story-player-main-container iframe:nth-of-type(2),
+.i-amphtml-story-player-main-container iframe:nth-of-type(3),
+.i-amphtml-story-player-main-container .story-player-iframe[i-amphtml-iframe-position="1"] {
   transform: translate3d(100%, 0, 0);
 }
 
-main .story-player-iframe[i-amphtml-iframe-position="-1"] {
+.i-amphtml-story-player-main-container .story-player-iframe[i-amphtml-iframe-position="-1"] {
   transform: translate3d(-100%, 0, 0);
 }
 

diff --git a/css/amp-story-player.css b/css/amp-story-player.css
@@ -33,6 +33,10 @@ amp-story-player a:not(:first-of-type) {
   visibility: hidden;
 }
 
+amp-story-player.i-amphtml-story-player-loaded a:first-of-type {
+  display: none;
+}
+
 amp-story-player::after {
   content: " ";
   position: absolute;

diff --git a/src/amp-story-player/amp-story-player-impl.js b/src/amp-story-player/amp-story-player-impl.js
@@ -386,17 +386,19 @@ export class AmpStoryPlayer {
 
   /** @private */
   initializeShadowRoot_() {
-    this.rootEl_ = this.doc_.createElement('main');
+    this.rootEl_ = this.doc_.createElement('div');
+    this.rootEl_.classList.add('i-amphtml-story-player-main-container');
 
-    const containerToUse = getMode().test
-      ? this.element_
-      : this.element_.attachShadow({mode: 'open'});
+    const containerToUse =
+      getMode().test || !this.element_.attachShadow
+        ? this.element_
+        : this.element_.attachShadow({mode: 'open'});
 
     // Inject default styles
     const styleEl = this.doc_.createElement('style');
     styleEl.textContent = cssText;
     containerToUse.appendChild(styleEl);
-    containerToUse.appendChild(this.rootEl_);
+    containerToUse.insertBefore(this.rootEl_, containerToUse.firstElementChild);
   }
 
   /**