🐛 amp-story-page-outlink CTA is broken in localDev

[jshamble]

Description

Swipe/click doesn't work for <amp-story-page-outlink> on localDev server.

TypeError: Cannot read property 'querySelector' of null
    at programaticallyClickOnTarget2 (amp-story-page-attachment.js:346)
    at amp-story-page-attachment.js:362
    at wrapped2 (timer-impl.js:70)
reportError @ error-reporting.js:203
wrapped2 @ timer-impl.js:72
setTimeout (async)
delay @ timer-impl.js:76
openRemote_ @ amp-story-page-attachment.js:361
open @ amp-story-page-attachment.js:325
onSwipeY_ @ amp-story-draggable-drawer.js:448
onTouchMove_ @ amp-story-draggable-drawer.js:342
wrapped2 @ event-helper-listen.js:49

Reproduction Steps

Go to a demo examples/amp-story/attachment.html and swipe or click on one of the amp-story-page-outlink pages' cta

Relevant Logs

No response

Browser(s) Affected

All

OS(s) Affected

All

Device(s) Affected

All

AMP Version Affected

No response

[jshamble]

#35913 fixes this.

[calebcordry]

Upon further investigation we found this is another side effect of #35823

<amp-story-outlink> creates a button in shadow DOM by calling createShadowRootWithStyle. createShadowRootWithStyle will not create shadow dom if getMode().test === true

amphtml/extensions/amp-story/1.0/utils.js

Lines 88 to 98 in a41366d

	export function createShadowRootWithStyle(container, element, css) {
	const style = self.document.createElement('style');
	style./*OK*/ textContent = css;
	const containerToUse = getMode().test
	? container
	: createShadowRoot(container);
	containerToUse.appendChild(style);
	containerToUse.appendChild(element);
	}

Later we try to queryselect explicitly into the shadow root using .shadowRoot but this does not exist because createShadowRootWithStyle did not create the shadow dom.

amphtml/extensions/amp-story/1.0/amp-story-page-attachment.js

Lines 344 to 346 in a41366d

	const pageAttachmentChild = this.element.parentElement
	?.querySelector('.i-amphtml-story-page-open-attachment-host')
	.shadowRoot.querySelector('a.i-amphtml-story-page-open-attachment');

[calebcordry]

@samouri cc/ @ampproject/wg-stories

[gmajoulet]

Can this be closed?

[samouri]

I'll ensure this does not occur again when trying to redeploy the change

[joydeep-bhowmik]

To the people who are looking for a fix , read this.
Tag 'amp-story-page-outlink', if present, must be the last child of tag 'amp-story-page'.

example

                  <amp-story-page id="idaxar440">
                     <amp-story-grid-layer template="fill">
                        <amp-img src="uploads/image.png>"
                           width="720" height="1280"
                           layout="responsive">
                        </amp-img>
                     </amp-story-grid-layer>
                     <amp-story-grid-layer template="thirds">
                        <div class="text" grid-area="lower-third">
                           <h1>hello</h1>
                        </div>
                     </amp-story-grid-layer>
                        <amp-story-page-outlink layout="nodisplay">
                              <a href="link" title="swipe up"></a>
                        </amp-story-page-outlink>
                  </amp-story-page>