Я пытаюсь использовать веб-компоненты на странице AMP с amp-script, но он не работает.
Я пытаюсь добавить следующий код в индекс. 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? в AMP не найдено содержимого или примера для пользовательских веб-компонентов.
Добавление всей страницы индекса -
<!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, поскольку пользовательский компонент не разрешен.
То, как я использую веб-компонент в обычных проектах, добавляю пользовательский компонент-контейнер в индекс. 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>
без подсказки, есть ли способ объединить эти два компонента вместе.