diff --git a/build-system/test-configs/dep-check-config.js b/build-system/test-configs/dep-check-config.js
index a748b626eace..919b1cad84c5 100644
--- a/build-system/test-configs/dep-check-config.js
+++ b/build-system/test-configs/dep-check-config.js
@@ -265,12 +265,11 @@ exports.rules = [
       'extensions/amp-story-education/0.1/amp-story-education.js->extensions/amp-story/1.0/amp-story-localization-service.js',
 
       // Story share menu
-      'extensions/amp-story-share-menu/0.1/amp-story-share-menu.js->extensions/amp-story/1.0/utils.js',
+      'extensions/amp-story-share-menu/0.1/amp-story-share-menu.js->extensions/amp-social-share/0.1/amp-social-share.js',
       'extensions/amp-story-share-menu/0.1/amp-story-share-menu.js->extensions/amp-story/1.0/amp-story-store-service.js',
-      'extensions/amp-story-share-menu/0.1/amp-story-share-menu.js->extensions/amp-story/1.0/amp-story-localization-service.js',
+      'extensions/amp-story-share-menu/0.1/amp-story-share-menu.js->extensions/amp-story/1.0/utils.js',
       'extensions/amp-story-share-menu/0.1/amp-story-share-menu.js->extensions/amp-story/1.0/request-utils.js',
       'extensions/amp-story-share-menu/0.1/amp-story-share-menu.js->extensions/amp-story/1.0/toast.js',
-      'extensions/amp-story/1.0/amp-story-share.js->extensions/amp-story-share-menu/0.1/amp-story-share-menu.js',
 
       // Story Shopping
       'extensions/amp-story-shopping/0.1/amp-story-shopping-config.js->extensions/amp-story/1.0/amp-story-store-service.js',
diff --git a/examples/visual-tests/amp-story/share-menu.html b/examples/visual-tests/amp-story/share-menu.html
index 7eb588edad2f..c194ce37326b 100644
--- a/examples/visual-tests/amp-story/share-menu.html
+++ b/examples/visual-tests/amp-story/share-menu.html
@@ -5,12 +5,10 @@
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-story"
         src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
-    <script async custom-element="amp-video"
-        src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
     <title>amp-story share menu visual diff</title>
     <meta name="viewport"
           content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link rel="canonical" href="./template-vertical.html">
+    <link rel="canonical" href="./share-menu.html">
     <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
     <style amp-custom>
       amp-story-page {
@@ -28,28 +26,30 @@
         text-align: center;
         text-shadow: 3px 3px rgba(0, 0, 0, 0.5);
       }
+      /* Since it doesn't have shadow root, we need to enforce the height */
+      amp-story-share-menu {
+        height: 100%;
+      }
     </style>
-    <script>
-      // TODO(#17108): Remove this when getMode().test is set.
-      __AMP_TEST = true;
+      <script>
+        __AMP_TEST = true;
+        /**
+         * On load, open the share menu.
+         */
+        document.addEventListener('ampstory:load', () => {
 
-      /**
-       * On load, open the share menu.
-       */
-      document.addEventListener('ampstory:load', () => {
-        const storyEl = document.querySelector('amp-story');
+          // Automatically open the share menu.
+          const storyEl = document.querySelector('amp-story');
+          const shareMenuAction = new CustomEvent('ampstory:dispatchaction', {
+            detail: {
+              action: 'toggleShareMenu',
+              data: true,
+            }
+          });
 
-        // Automatically open the share menu.
-        const openShareMenuEvent = new CustomEvent('ampstory:dispatchaction', {
-          detail: {
-            action: 'toggleShareMenu',
-            data: true,
-          }
+          storyEl.dispatchEvent(shareMenuAction);
         });
-
-        storyEl.dispatchEvent(openShareMenuEvent);
-      });
-    </script>
+      </script>
   </head>
 
   <body>
@@ -61,8 +61,8 @@
 
       <amp-story-page id="cover">
         <amp-story-grid-layer template="fill">
-          <amp-video autoplay layout="fill" poster="/examples/visual-tests/picsum.photos/image981_1600x900.jpg">
-          </amp-video>
+          <amp-img layout="fill" src="/examples/visual-tests/picsum.photos/image981_1600x900.jpg" width="3" height="5">
+          </amp-img>
         </amp-story-grid-layer>
         <amp-story-grid-layer template="vertical">
           <h1 id="hello-world">Hello world!</h1>
diff --git a/examples/visual-tests/amp-story/share-menu.rtl.html b/examples/visual-tests/amp-story/share-menu.rtl.html
index 5a97520b4114..a07842062f65 100644
--- a/examples/visual-tests/amp-story/share-menu.rtl.html
+++ b/examples/visual-tests/amp-story/share-menu.rtl.html
@@ -5,12 +5,10 @@
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-story"
         src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
-    <script async custom-element="amp-video"
-        src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
     <title>amp-story share menu visual diff</title>
     <meta name="viewport"
           content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link rel="canonical" href="./template-vertical.html">
+    <link rel="canonical" href="./share-menu.html">
     <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
     <style amp-custom>
       amp-story-page {
@@ -28,26 +26,28 @@
         text-align: center;
         text-shadow: 3px 3px rgba(0, 0, 0, 0.5);
       }
+      /* Since it doesn't have shadow root, we need to enforce the height */
+      amp-story-share-menu {
+        height: 100%;
+      }
     </style>
     <script>
-      // TODO(#17108): Remove this when getMode().test is set.
       __AMP_TEST = true;
-
       /**
        * On load, open the share menu.
        */
       document.addEventListener('ampstory:load', () => {
-        const storyEl = document.querySelector('amp-story');
 
         // Automatically open the share menu.
-        const openShareMenuEvent = new CustomEvent('ampstory:dispatchaction', {
+        const storyEl = document.querySelector('amp-story');
+        const shareMenuAction = new CustomEvent('ampstory:dispatchaction', {
           detail: {
             action: 'toggleShareMenu',
             data: true,
           }
         });
 
-        storyEl.dispatchEvent(openShareMenuEvent);
+        storyEl.dispatchEvent(shareMenuAction);
       });
     </script>
   </head>
@@ -61,14 +61,13 @@
 
       <amp-story-page id="cover">
         <amp-story-grid-layer template="fill">
-          <amp-video autoplay layout="fill" poster="/examples/visual-tests/picsum.photos/image981_1600x900.jpg">
-          </amp-video>
+          <amp-img layout="fill" src="/examples/visual-tests/picsum.photos/image981_1600x900.jpg" width="3" height="5">
+          </amp-img>
         </amp-story-grid-layer>
         <amp-story-grid-layer template="vertical">
           <h1 id="hello-world">مرحبا بالعالم</h1>
         </amp-story-grid-layer>
       </amp-story-page>
-
       <amp-story-social-share layout="nodisplay">
         <script type="application/json">
           {
@@ -86,7 +85,6 @@ <h1 id="hello-world">مرحبا بالعالم</h1>
           }
         </script>
       </amp-story-social-share>
-
     </amp-story>
   </body>
 
diff --git a/extensions/amp-story-share-menu/0.1/amp-story-share-menu.js b/extensions/amp-story-share-menu/0.1/amp-story-share-menu.js
index 8c9f37daed8b..c7386f473ef9 100644
--- a/extensions/amp-story-share-menu/0.1/amp-story-share-menu.js
+++ b/extensions/amp-story-share-menu/0.1/amp-story-share-menu.js
@@ -1,10 +1,10 @@
 import {userAssert} from '#core/assert';
 import {Keys_Enum} from '#core/constants/key-codes';
 import * as Preact from '#core/dom/jsx';
+import {Layout_Enum} from '#core/dom/layout';
 import {closestAncestorElementBySelector} from '#core/dom/query';
 import {isObject} from '#core/types';
 import {map} from '#core/types/object';
-import {getWin} from '#core/window';
 import {
   copyTextToClipboard,
   isCopyingToClipboardSupported,
@@ -20,15 +20,15 @@ import {Toast} from 'extensions/amp-story/1.0/toast';
 
 import {CSS} from '../../../build/amp-story-share-menu-0.1.css';
 import {getAmpdoc} from '../../../src/service-helpers';
-import {localize} from '../../amp-story/1.0/amp-story-localization-service';
 import {
   Action,
   StateProperty,
   UIType,
-  getStoreService,
 } from '../../amp-story/1.0/amp-story-store-service';
 import {createShadowRootWithStyle} from '../../amp-story/1.0/utils';
 
+import '../../amp-social-share/0.1/amp-social-share';
+
 /** @const {string} Class to toggle the share menu. */
 export const VISIBLE_CLASS = 'i-amphtml-story-share-menu-visible';
 
@@ -52,13 +52,13 @@ const SHARE_PROVIDER_LOCALIZED_STRING_ID = map({
  * Key for share providers in config.
  * @const {string}
  */
-export const SHARE_PROVIDERS_KEY = 'shareProviders';
+const SHARE_PROVIDERS_KEY = 'shareProviders';
 
 /**
  * Deprecated key for share providers in config.
  * @const {string}
  */
-export const DEPRECATED_SHARE_PROVIDERS_KEY = 'share-providers';
+const DEPRECATED_SHARE_PROVIDERS_KEY = 'share-providers';
 
 /**
  * @param {!Node} child
@@ -70,52 +70,53 @@ const renderShareItemElement = (child) => (
 /**
  * Share menu UI.
  */
-export class AmpStoryShareMenu {
+export class AmpStoryShareMenu extends AMP.BaseElement {
   /**
-   * @param {!Element} hostEl
+   * @param {!Element} element
    */
-  constructor(hostEl) {
-    /** @private @const {!Window} */
-    this.win_ = getWin(hostEl);
+  constructor(element) {
+    super(element);
 
     /** @private {?Element} */
-    this.element_ = null;
-
-    /** @private @const {!./amp-story-store-service.AmpStoryStoreService} */
-    this.storeService_ = getStoreService(this.win_);
+    this.rootEl_ = null;
 
     /** @private @const {!Element} */
     this.storyEl_ = userAssert(
-      closestAncestorElementBySelector(hostEl, 'amp-story')
+      closestAncestorElementBySelector(element, 'amp-story')
     );
 
     /** @const @private {!../../../src/service/vsync-impl.Vsync} */
-    this.vsync_ = Services.vsyncFor(this.win_);
+    this.vsync_ = Services.vsyncFor(this.win);
 
-    /** @private {!Element} */
-    this.hostEl_ = hostEl;
+    /** @private {?../../../src/service/localization.LocalizationService} */
+    this.localizationService_ = null;
+
+    /** @private {?../../../extensions/amp-story/1.0/amp-story-store-service.AmpStoryStoreService} */
+    this.storeService_ = null;
   }
 
   /**
    * Builds and appends the component in the story. Could build either the
    * amp-social-share button to display the native system sharing, or a fallback
    * UI.
+   * @return {!Promise}
    */
-  build() {
-    if (this.element_) {
+  buildCallback() {
+    if (this.rootEl_) {
       return;
     }
 
-    const providersList = this.buildProvidersList_();
-    this.element_ = this.buildDialog_(providersList);
-    // TODO(mszylkowski): import '../../amp-social-share/0.1/amp-social-share' when this file is lazy loaded.
-    Services.extensionsFor(this.win_).installExtensionForDoc(
-      getAmpdoc(this.storyEl_),
-      'amp-social-share'
-    );
-
-    this.vsync_.mutate(() => {
-      createShadowRootWithStyle(this.hostEl_, this.element_, CSS);
+    return Promise.all([
+      Services.storyStoreServiceForOrNull(this.win).then(
+        (service) => (this.storeService_ = service)
+      ),
+      Services.localizationServiceForOrNull(this.element).then(
+        (service) => (this.localizationService_ = service)
+      ),
+    ]).then(() => {
+      const providersList = this.buildProvidersList_();
+      this.rootEl_ = this.buildDialog_(providersList);
+      createShadowRootWithStyle(this.element, this.rootEl_, CSS);
       this.initializeListeners_();
     });
   }
@@ -140,7 +141,7 @@ export class AmpStoryShareMenu {
       true /** callToInitialize */
     );
 
-    this.win_.addEventListener('keyup', (event) => {
+    this.win.addEventListener('keyup', (event) => {
       if (event.key == Keys_Enum.ESCAPE) {
         event.preventDefault();
         this.close_();
@@ -155,8 +156,8 @@ export class AmpStoryShareMenu {
    */
   onShareMenuStateUpdate_(isOpen) {
     this.vsync_.mutate(() => {
-      this.element_.classList.toggle(VISIBLE_CLASS, isOpen);
-      this.element_.setAttribute('aria-hidden', !isOpen);
+      this.rootEl_.classList.toggle(VISIBLE_CLASS, isOpen);
+      this.rootEl_.setAttribute('aria-hidden', !isOpen);
     });
   }
 
@@ -168,8 +169,8 @@ export class AmpStoryShareMenu {
   onUIStateUpdate_(uiState) {
     this.vsync_.mutate(() => {
       uiState !== UIType.MOBILE
-        ? this.element_.setAttribute('desktop', '')
-        : this.element_.removeAttribute('desktop');
+        ? this.rootEl_.setAttribute('desktop', '')
+        : this.rootEl_.removeAttribute('desktop');
     });
   }
 
@@ -202,8 +203,7 @@ export class AmpStoryShareMenu {
         <div class="i-amphtml-story-share-menu-container">
           <button
             class="i-amphtml-story-share-menu-close-button"
-            aria-label={localize(
-              this.storyEl_,
+            aria-label={this.localizationService_.getLocalizedString(
               LocalizedStringId_Enum.AMP_STORY_CLOSE_BUTTON_LABEL
             )}
             role="button"
@@ -285,7 +285,9 @@ export class AmpStoryShareMenu {
         type={provider}
       >
         <span class="i-amphtml-story-share-label">
-          {localize(this.win_.document, shareProviderLocalizedStringId)}
+          {this.localizationService_.getLocalizedString(
+            shareProviderLocalizedStringId
+          )}
         </span>
       </amp-social-share>
     );
@@ -304,11 +306,10 @@ export class AmpStoryShareMenu {
    * @private
    */
   maybeRenderLinkShareButton_() {
-    if (!isCopyingToClipboardSupported(this.win_.document)) {
+    if (!isCopyingToClipboardSupported(this.win.document)) {
       return;
     }
-    const label = localize(
-      this.storyEl_,
+    const label = this.localizationService_.getLocalizedString(
       LocalizedStringId_Enum.AMP_STORY_SHARING_PROVIDER_NAME_LINK
     );
     return renderShareItemElement(
@@ -332,9 +333,8 @@ export class AmpStoryShareMenu {
     const url = Services.documentInfoForDoc(
       getAmpdoc(this.storyEl_)
     ).canonicalUrl;
-    if (!copyTextToClipboard(this.win_, url)) {
-      const failureString = localize(
-        this.storyEl_,
+    if (!copyTextToClipboard(this.win, url)) {
+      const failureString = this.localizationService_.getLocalizedString(
         LocalizedStringId_Enum.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT
       );
       Toast.show(this.storyEl_, failureString);
@@ -351,12 +351,24 @@ export class AmpStoryShareMenu {
   buildCopySuccessfulToast_(url) {
     return (
       <div class="i-amphtml-story-copy-successful">
-        {localize(
-          this.storyEl_,
+        {this.localizationService_.getLocalizedString(
           LocalizedStringId_Enum.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT
         )}
         <div class="i-amphtml-story-copy-url">{url}</div>
       </div>
     );
   }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return layout == Layout_Enum.CONTAINER;
+  }
 }
+
+/**
+ * This extension installs the share widget.
+ */
+
+AMP.extension('amp-story-share-menu', '0.1', (AMP) => {
+  AMP.registerElement('amp-story-share-menu', AmpStoryShareMenu);
+});
diff --git a/extensions/amp-story-share-menu/0.1/test/test-amp-story-share-menu.js b/extensions/amp-story-share-menu/0.1/test/test-amp-story-share-menu.js
index f308ec8d4f4c..9475b703a43a 100644
--- a/extensions/amp-story-share-menu/0.1/test/test-amp-story-share-menu.js
+++ b/extensions/amp-story-share-menu/0.1/test/test-amp-story-share-menu.js
@@ -1,6 +1,7 @@
 import {Keys_Enum} from '#core/constants/key-codes';
 
 import {Services} from '#service';
+import {LocalizationService} from '#service/localization';
 
 import {registerServiceBuilder} from '../../../../src/service-helpers';
 import {
@@ -40,6 +41,11 @@ describes.realWin('amp-story-share-menu', {amp: true}, (env) => {
       installExtensionForDoc,
     });
 
+    const localizationService = new LocalizationService(win.document.body);
+    env.sandbox
+      .stub(Services, 'localizationServiceForOrNull')
+      .returns(Promise.resolve(localizationService));
+
     hostEl = win.document.createElement('div');
     ampStory = win.document.createElement('amp-story');
     win.document.body.appendChild(ampStory);
@@ -47,42 +53,42 @@ describes.realWin('amp-story-share-menu', {amp: true}, (env) => {
     shareMenu = new AmpStoryShareMenu(hostEl);
   });
 
-  it('should build the sharing menu', () => {
-    shareMenu.build();
-    expect(shareMenu.element_).to.exist;
+  it('should build the sharing menu', async () => {
+    await shareMenu.buildCallback();
+    expect(shareMenu.rootEl_).to.exist;
   });
 
-  it('should show the share menu on store property update', () => {
-    shareMenu.build();
+  it('should show the share menu on store property update', async () => {
+    await shareMenu.buildCallback();
 
     storeService.dispatch(Action.TOGGLE_SHARE_MENU, true);
 
-    expect(shareMenu.element_).to.have.class(VISIBLE_CLASS);
+    expect(shareMenu.rootEl_).to.have.class(VISIBLE_CLASS);
   });
 
-  it('should hide the share menu on click on the overlay', () => {
-    shareMenu.build();
+  it('should hide the share menu on click on the overlay', async () => {
+    await shareMenu.buildCallback();
 
     storeService.dispatch(Action.TOGGLE_SHARE_MENU, true);
-    shareMenu.element_.dispatchEvent(new Event('click'));
+    shareMenu.rootEl_.dispatchEvent(new Event('click'));
 
-    expect(shareMenu.element_).not.to.have.class(VISIBLE_CLASS);
+    expect(shareMenu.rootEl_).not.to.have.class(VISIBLE_CLASS);
     expect(storeService.get(StateProperty.SHARE_MENU_STATE)).to.be.false;
   });
 
-  it('should not hide the share menu on click on the widget container', () => {
-    shareMenu.build();
+  it('should not hide the share menu on click on the widget container', async () => {
+    await shareMenu.buildCallback();
 
     storeService.dispatch(Action.TOGGLE_SHARE_MENU, true);
     hostEl
       .querySelector('.i-amphtml-story-share-menu-container')
       .dispatchEvent(new Event('click'));
 
-    expect(shareMenu.element_).to.have.class(VISIBLE_CLASS);
+    expect(shareMenu.rootEl_).to.have.class(VISIBLE_CLASS);
   });
 
-  it('should hide the share menu on escape key press', () => {
-    shareMenu.build();
+  it('should hide the share menu on escape key press', async () => {
+    await shareMenu.buildCallback();
 
     const clickCallbackSpy = env.sandbox.spy();
     win.addEventListener('keyup', clickCallbackSpy);
@@ -95,12 +101,4 @@ describes.realWin('amp-story-share-menu', {amp: true}, (env) => {
 
     expect(clickCallbackSpy).to.have.been.calledOnce;
   });
-
-  it('should load the amp-social-share extension', () => {
-    shareMenu.build();
-
-    expect(
-      installExtensionForDoc.withArgs(env.sandbox.match.any, 'amp-social-share')
-    ).to.have.been.called;
-  });
 });
diff --git a/extensions/amp-story-share-menu/OWNERS b/extensions/amp-story-share-menu/OWNERS
new file mode 100644
index 000000000000..a31676ec5802
--- /dev/null
+++ b/extensions/amp-story-share-menu/OWNERS
@@ -0,0 +1,23 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [
+        {
+          name: 'gmajoulet',
+          notify: true,
+        },
+        {
+          name: 'newmuis',
+          notify: true,
+        },
+        {
+          name: 'mszylkowski',
+          notify: true,
+        },
+      ],
+    },
+  ],
+}
diff --git a/extensions/amp-story/1.0/amp-story-share.js b/extensions/amp-story/1.0/amp-story-share.js
index 8dcd37a66870..6f8b28c97e86 100644
--- a/extensions/amp-story/1.0/amp-story-share.js
+++ b/extensions/amp-story/1.0/amp-story-share.js
@@ -1,7 +1,6 @@
 import * as Preact from '#core/dom/jsx';
 import {Services} from '#service';
 import {user} from '#utils/log';
-import {AmpStoryShareMenu} from 'extensions/amp-story-share-menu/0.1/amp-story-share-menu';
 import {getAmpdoc} from 'src/service-helpers';
 import {
   Action,
@@ -38,7 +37,7 @@ export class AmpStoryShare {
     this.storeService_ = getStoreService(win);
 
     /** @private {!Element} used to host the fallback menu or for analytics. */
-    this.shareMenuEl_ = <div class="i-amphtml-story-share-menu-host"></div>;
+    this.shareMenuEl_ = <amp-story-share-menu></amp-story-share-menu>;
     storyEl.appendChild(this.shareMenuEl_);
 
     /** @private {boolean} */
@@ -106,8 +105,11 @@ export class AmpStoryShare {
       return;
     }
     this.initializedFallback_ = true;
-    const shareMenu = new AmpStoryShareMenu(this.shareMenuEl_);
-    shareMenu.build();
+    Services.extensionsFor(this.win_).installExtensionForDoc(
+      getAmpdoc(this.storyEl_),
+      'amp-story-share-menu',
+      '0.1'
+    );
   }
 
   /**
diff --git a/extensions/amp-story/1.0/test-e2e/test-amp-story-share-menu.js b/extensions/amp-story/1.0/test-e2e/test-amp-story-share-menu.js
index e1cb47960b1f..7b9509637e0c 100644
--- a/extensions/amp-story/1.0/test-e2e/test-amp-story-share-menu.js
+++ b/extensions/amp-story/1.0/test-e2e/test-amp-story-share-menu.js
@@ -30,7 +30,7 @@ describes.endtoend(
       await controller.switchToLight();
 
       const shareMenuHost = await controller.findElement(
-        '.i-amphtml-story-share-menu-host'
+        'amp-story-share-menu'
       );
       await controller.switchToShadowRoot(shareMenuHost);
       const getLinkButton = await controller.findElement(
diff --git a/test/visual-diff/visual-tests.jsonc b/test/visual-diff/visual-tests.jsonc
index 00dc86c91276..1b762e0ef0f5 100644
--- a/test/visual-diff/visual-tests.jsonc
+++ b/test/visual-diff/visual-tests.jsonc
@@ -326,7 +326,7 @@
       "viewport": {"width": 320, "height": 480},
       "loading_complete_selectors": [
         ".i-amphtml-story-loaded",
-        ".i-amphtml-story-share-menu"
+        "amp-story-share-menu"
       ]
     },
     {
@@ -476,7 +476,7 @@
       "viewport": {"width": 320, "height": 480},
       "loading_complete_selectors": [
         ".i-amphtml-story-loaded",
-        ".i-amphtml-story-share-menu"
+        "amp-story-share-menu"
       ]
     },
     {