error "No ampdoc found" reading amp from pwa in shadow dom

[iwoak]

We load an amp-page in shadow dom from pwa by an amp-reader component, but we receive an error as soon as you open the page:

Template failed: [object HTMLDivElement] [object HTMLDivElement]: No ampdoc found for [object HTMLTemplateElement]

amp page is visible and some things works fine, but we have errors after some other actions like click/tap on element with event listener like this:

tap:audio-target.scrollTo()

audio-target is an ours element target selector, but we have

Uncaught (in promise) Error: No ampdoc found for [object HTMLHtmlElement]

this is a production affected url (pwa): https://rep.repubblica.it/pwa/generale/2018/08/06/news/gas_esplosivi_benzina_e_vernici_ogni_giorno_10_mila_bombe_vaganti-203552010/

this is the relative original amp page: https://rep.repubblica.it/ws/detail/generale/2018/08/06/news/gas_esplosivi_benzina_e_vernici_ogni_giorno_10_mila_bombe_vaganti-203552010/

In the original amp page all works fine, we have noted this issue since last 3-4 days.

[gilbertococchi]

Additional Context is that it happens when the users is clicking on a#detail-audio_trigger

[gilbertococchi]

To emulate it's possible to force the showing of a#detail-audio_trigger by changing the visibility from Dev Tools of its ancestors and then click into the icon to reproduce.
No changes were made on the site recently so we suspect some changes in the Shadow DOM interactions here.

[gilbertococchi]

@danielrozenberg would you be able to triage and investigate?

[sparhami]

Did some debugging and found what appears to be a problem with <amp-access> when used in a shadow doc with this function:

amphtml/extensions/amp-access/0.1/amp-access.js

Lines 219 to 230 in a5b415d

	onDomUpdate_(event) {
	// Only re-authorize sections if authorization already fired, otherwise
	// just wait and existing callback will cover new sections.
	if (this.firstAuthorizationsCompleted_) {
	// Guard against anything else in flight.
	return this.lastAuthorizationPromises_.then(() => {
	const target = dev().assertElement(event.target);
	const responses = this.combinedResponses();
	this.applyAuthorizationToRoot_(target, responses);
	});
	}
	}

One problem appears to be that event.target is null when read in the .then(). It is not null when initially read at the start of onDomUpdate_. I'm not sure why that might be the case.

This works for non-shadow-v0.js since the single doc will be returned. Note that this will also have problems with <amp-next-page> when we fix getAmpDoc to return the correct AmpDoc.

[sparhami]

Template failed: [object HTMLDivElement] [object HTMLDivElement]: No ampdoc found for [object HTMLTemplateElement]

It looks like at some point the code tries to get the ampdoc for a <template> element, but the <template> is no longer in the DOM (presumably because it has been replaced by the rendered template). As a result, the AmpDoc cannot be found.

I'm not exactly certain on this part, but this may be occurring because the same template is trying to be rendered twice. I think this is because the same template exists under two amp-access elements:

<div amp-access="NOT (showContent)">
  ..
  <section amp-access="NOT (showContent)">
    ...
    <div class="paywall-fixed">
      <template amp-access-template type="amp-mustache">...</template>
    </div>
    ...
  </section>
</div>

and the code is going through and finding the templates within each subtree and ends up bumping into the same template twice. I'm not sure that this will cause an issue even though an error is being reported.

I think it might make sense to remove the amp-access from the <section>, since the parent already has it.

[iwoak]

Thanks for your reply @sparhami. I removed amp-access on section tag as you suggested and however it is a good change, but I have jet the same errors in console.

[sparhami]

Thanks for removing the extra amp-access. I can now see that the source of the problem lies here:

amphtml/extensions/amp-access/0.1/amp-access.js

Lines 508 to 519 in 4c6faff

	const rendered = this.templates_.renderTemplate(template, response);
	return rendered.then(element => {
	return this.vsync_.mutatePromise(() => {
	element.setAttribute('amp-access-template', '');
	element[TEMPLATE_PROP] = template;
	if (template.parentElement) {
	template.parentElement.replaceChild(element, template);
	} else if (prev && prev.parentElement) {
	prev.parentElement.replaceChild(element, prev);
	}
	});
	});

When the template has been rendered for the first time, it stores the template onto the rendered element for future reference. The second time it comes through to update, it takes the stored template and calls renderTemplate again. However, since this is a shadow document and the template no longer has a parent element, trying to find the AmpDoc fails when it checks if it is okay to render here:

amphtml/src/service/template-impl.js

Lines 116 to 119 in 4c6faff

	viewerCanRenderTemplates() {
	return getServiceForDoc(this.element, 'viewer')
	.hasCapability('viewerRenderTemplate');
	}

I'll take a look to see how this can be addressed.

[iwoak]

Thanks a lot for your explanation and for your time over this @sparhami and @gilbertococchi !

[sparhami]

The "No ampdoc found for" error should no longer appear. I am unsure if all the issues are ironed out however (e.g. audio icon) since the test account I have does not appear to have an active subscription. Are there still issues that you see?

[iwoak]

Thanks a lot! We no longer have the error "No ampdoc found for" and so we can close this issue.

PS yes in this moment there are some error on audio, but they are ours and we just fixed :)