Amphtml: The parent tag of tag 'amp-sidebar' is 'amp-bind-macro', but it can only be 'body'.
What's the issue?
When using amp-bind-macro, amp-sidebar causes a validation issue with the following error message:
The parent tag of tag 'amp-sidebar' is 'amp-bind-macro', but it can only be 'body'.
How do we reproduce the issue?
I use the following macros to format currency:
<amp-bind-macro id="getLog10" arguments="num" expression="num.length - 1" />
<amp-bind-macro id="numShouldHaveComma" arguments="log10" expression="log10%3==0 && log10!=0" />
<amp-bind-macro id="formatNumber_map" arguments="char, ind, numStr" expression="(numShouldHaveComma(getLog10(numStr.substr(ind)))) ? char+',' : char" />
<amp-bind-macro id="formatNumber" arguments="num, numStr" expression="(num < 9999999) ? 'R ' + numStr.split('').map((char,ind)=>formatNumber_map(char,ind, numStr)).join('') : 'P.O.A'" />
<amp-bind-macro id="formatNumberPM" arguments="num, numStr, retail_num" expression="(round(retail_num) > 9999999) ? 'P.O.A' : 'R ' + numStr.split('').map((char,ind)=>formatNumber_map(char,ind, numStr)).join('') + 'pm*'" />
<amp-bind-macro id="formatMoney" arguments="val" expression="formatNumber(round(val), round(val).toString())" />
<amp-bind-macro id="formatMoneyPM" arguments="val, val2" expression="formatNumberPM(round(val), round(val).toString(), val2)" />
What have you used to check?
https://search.google.com/test/amp
https://validator.ampproject.org
Which AMP version is affected?
New issue as far as I am aware, I don't always check validity of the pages I generate, but did notice several months ago that amp-bind-macro wraps everything within the body tag for some reason.
AcidRaZor
All 9 comments
I'm also wondering if this is the reason why, when using mobile preview or testing facilities that shows you a screenshot of the site, why it shows all text (html) and not the actual site.
AcidRaZor
on 16 Jan 2019
@AcidRaZor Is amp-sidebar actually a child of body? Can you post your HTML?
I quick try with the following code did not generate any issues for me:
<!doctype html>
<html âš¡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="self.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1">
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</head>
<body>Hello, AMP world.
<amp-sidebar layout=nodisplay ></amp-sidebar>
<amp-bind-macro id="circleArea" arguments="radius" expression="3.14 * radius * radius" />
</body>
</html>
aghassemi
on 16 Jan 2019
I can reproduce this if amp-sidebar is AFTER amp-bind-macro AND amp-bind-macro is self-closing.
e.g.
<body>Hello, AMP world.
<amp-bind-macro id="getLog10" arguments="num" expression="num.length - 1"/>
<amp-sidebar layout=nodisplay ></amp-sidebar>
</body>
@AcidRaZor For a quick work-around, instead of using a self-closing amp-bind-macro (e.g. <amp-bind-macro id="getLog10" arguments="num" expression="num.length - 1"/>) use a full explicit end tag (e.g. <amp-bind-macro id="getLog10" arguments="num" expression="num.length - 1"></amp-bind-macro>
/to @Gregable, looks like there is a parsing issue in parent detection of elements which are after self-closing tags.
aghassemi
on 16 Jan 2019
There is no such thing as a self-closing tag in html5. There are about a dozen void elements which have no associated closing tag, but self-closing tag syntax is not a thing.
So, a browser (and the amp validator) will see the above example as the same parse tree as:
<body>Hello, AMP world.
<amp-bind-macro id="getLog10" arguments="num" expression="num.length - 1">
<amp-sidebar layout=nodisplay ></amp-sidebar>
</amp-bind>
</body>
Gregable
on 16 Jan 2019
Technically, there are self-closing tags within other namespaces within HTML. The only such namespace allowed by AMP is SVG. This isn't relevant for the question, but to avoid confusion.
Gregable
on 16 Jan 2019
Closing as working as intended.
Gregable
on 16 Jan 2019
I see. I will update the examples then.
aghassemi
on 16 Jan 2019
Thanks guys!
AcidRaZor
on 17 Jan 2019
Just as another FYI, I did have the macro's after the amp-sidebar and it still did the same, but the explanation given makes sense. Thanks again for the quick response
AcidRaZor
on 17 Jan 2019
Related issues
cvializ
·
3Comments
aghassemi
·
3Comments
samanthamorco
·
3Comments
aghassemi
·
3Comments
akshaylive
·
3Comments