4

I am trying to use web components in AMP page with amp-script but it's not working.

I am trying to add following code in index.html

<amp-script width="200" height="50" script="app-render">
    <div id="app">loading...</div>
</amp-script>

<script id="app-render" type="text/plain" target="amp-script">
    const app = document.getElementById('app');
    app.innerHTML = <amp-news-container id="amp-news-container"></amp-news-container>;
</script>

But not working.

I also tried to add custom component into page but that creates error as custom component not allowed.

Is there any way i can use web components in AMP pages? no content or example found to user web components in AMP.

Adding whole index page - 

<!DOCTYPE html>
<html ⚡️ lang="en" dir="ltl">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>AMP Web Components</title>
    <link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">

    <script type="application/ld+json">
        {
          "@context": "http://schema.org",
          "@type": "NewsArticle",
          "headline": "Open-source framework for publishing content",
          "datePublished": "2015-10-07T12:02:41Z",
          "image": [
            "logo.jpg"
          ]
        }
      </script>
    <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>

    <meta name="amp-script-src" content="sha384-N4a96F4jCQXTuaWhxfKGHDf9ZQmsqohVQd4GoJxNFVi1PznNK-wtSZXZuJTCettD" />

    <script custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js" async=""></script>

    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@500;700&display=swap" rel="stylesheet">
</head>

<body class="news">

    <amp-script width="200" height="50" script="app-render">
        <div id="app">loading...</div>
    </amp-script>


    <script id="app-render" type="text/plain" target="amp-script">
        const app = document.getElementById('app');
        app.innerHTML = <amp-news-container id="amp-news-container"></amp-news-container>;

    </script>
</body>

</html>

Here is my - amp-news-container.js

const ampNewsContainer = document.createElement('ampNewsContainer');

ampNewsContainer.innerHTML = `
    <style>

    </style>
    <div class="amp-news-container">
        <amp-news-header class="amp-news-header"></amp-news-header>
    </div>
`;

class AmpNewsContainer extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.appendChild(ampNewsContainer.cloneNode(true));
    }

}

window.customElements.define('amp-news-container', AmpNewsContainer);

and 

const ampNewsHeader = document.createElement('ampNewsHeader');

ampNewsHeader.innerHTML = `
    <style>

    </style>
    <div class="amp-news-header">
        <h1>Page header</h1>
    </div>
`;

class AmpNewsHeader extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.appendChild(ampNewsHeader.cloneNode(true));
    }
}

window.customElements.define('amp-news-container', AmpNewsHeader);

But i am facing error while i am trying add/bind amp-news-container to body or div tag.

I can't use custom component directly in body as follow, it's giving AMP validation error as custom component not allowed.

The way i use web component in normal projects, add custom container component in index.html and import other sub models into same index page but no similar way found to use them in AMP.

Example of trying custom component in body - 

<body class="afc-champions-league-news">

<div id="amp-news-container">
        <amp-news-container id="amp-news-container"></amp-news-container>
</div>

<amp-script type="module" src="js/modules/news/components/amp-news-header.js" width="300" height="100">
    </amp-script>
    <amp-script type="module" src="js/modules/news/components/amp-news-container.js" width="300" height="100">
    </amp-script> -->
</body>

no Clue if is there any way i can have these two integrated together.

Rohit Ambre
  • 921
  • 1
  • 11
  • 25
  • Could you provide the JavaScript code to understand it better? – reymon359 May 03 '20 at 11:31
  • I have no clue about how to use web component in AMP all above code, i am experimenting by reading over amp-script and react in AMP. I have added code i tried till now. – Rohit Ambre May 03 '20 at 12:00

0 Answers0