4

我正在尝试通过 amp-script 在 AMP 页面中使用Web 组件，但它不起作用。

我正在尝试在 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>

但不工作。

我还尝试将自定义组件添加到页面中，但这会产生错误，因为不允许使用自定义组件。

有什么方法可以在 AMP 页面中使用 Web 组件？在 AMP 中未找到用户 Web 组件的内容或示例。

添加整个索引页面 - 

<!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>

这是我的 - 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);

和

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);

但是我在尝试将 amp-news-container 添加/绑定到 body 或 div 标签时遇到错误。

我不能直接在正文中使用自定义组件，如下所示，它会给出 AMP 验证错误，因为不允许使用自定义组件。

我在普通项目中使用 Web 组件的方式，在 index.html 中添加自定义容器组件并将其他子模型导入同一索引页面，但在 AMP 中没有找到类似的使用方式。

在正文中尝试自定义组件的示例 -

<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>

没有线索，如果有什么办法可以将这两个集成在一起。

4

0 回答 0