Javascript 我可以在AMP页面中使用web组件吗_Javascript_Web Component_Amp Html_Ampscript

Javascript 我可以在AMP页面中使用web组件吗

javascript amp-html

Javascript 我可以在AMP页面中使用web组件吗,javascript,web-component,amp-html,ampscript,Javascript,Web Component,Amp Html,Ampscript,我试图在AMP页面中使用AMP脚本，但它不起作用我试图在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">

我试图在AMP页面中使用AMP脚本，但它不起作用

我试图在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>


加载。。。
const app=document.getElementById（'app'）；
app.innerHTML=；

但不起作用

我还尝试将自定义组件添加到页面中，但由于不允许使用自定义组件，所以会产生错误

我可以在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网络组件
{
“@context”：”http://schema.org",
“@type”：“新闻文章”，
“标题”：“发布内容的开源框架”，
“发布日期”：“2015-10-07T12:02:41Z”，
“图像”：[
“logo.jpg”
]
}
身体{
-webkit动画：-amp开始8s步骤（1，结束）0s 1正常两个步骤；
-moz动画：-amp开始8s步骤（1，结束）0s 1正常两个步骤；
-ms动画：-amp开始8s步骤（1，结束）0s 1正常两个步骤；
动画：-amp开始8s步骤（1，结束）0s 1正常两者
}
@-webkit关键帧-amp开始{
从{
可见性：隐藏
}
到{
可见性：可见
}
}
@-moz关键帧-amp开始{
从{
可见性：隐藏
}
到{
可见性：可见
}
}
@-ms关键帧-amp开始{
从{
可见性：隐藏
}
到{
可见性：可见
}
}
@-o关键帧-amp开始{
从{
可见性：隐藏
}
到{
可见性：可见
}
}
@关键帧-amp开始{
从{
可见性：隐藏
}
到{
可见性：可见
}
}
身体{
-webkit动画：无；
-moz动画：无；
-ms动画：无；
动画：无
}
加载。。。
const app=document.getElementById（'app'）；
app.innerHTML=；

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

const ampNewsContainer=document.createElement（'ampNewsContainer'）；
ampNewsContainer.innerHTML=`
`;
类AmpNewsContainer扩展了HtmleElement{
构造函数（）{
超级（）；
this.attachShadow（{mode:'open'}）；
this.shadowRoot.appendChild（ampNewsContainer.cloneNode（true））；
}
}
window.customElements.define（'amp-news-container'，AmpNewsContainer）；

及

const-ampnewheader=document.createElement（'ampnewheader'）；
ampNewsHeader.innerHTML=`
页眉
`;
类AmpNewsHeader扩展了HtmleElement{
构造函数（）{
超级（）；
this.attachShadow（{mode:'open'}）；
this.shadowRoot.appendChild（ampnewheader.cloneNode（true））；
}
}

window.customElements.define（'amp-news-container'，AmpNewsHeader）

但我在尝试将amp新闻容器添加/绑定到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>

-->

我不知道是否有任何方法可以将这两个组件集成在一起。

您能提供JavaScript代码以更好地理解它吗？我不知道如何在AMP中使用web组件。所有这些代码，我都是通过阅读AMP脚本并在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>