Мне нравится, как Angular управляет компонентами. Я имею в виду отдельные файлы html, scss и js. Но я не хочу использовать Angular, Webpack или jQuery. Я надеюсь написать простое веб-приложение, зависящее только от API браузера. Я почти у цели, но единственное, что блокирует меня, — это включить HTML-шаблоны в index.html. Вероятно, я мог бы написать сценарий для добавления всех шаблонов в конец index.html. Я проверял это, и это работало хорошо. Но мне интересно, есть ли более простой способ, о котором я не знаю. Обратите внимание, что мне нужна нулевая зависимость.

index.html

{amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html lang="en"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="UTF-8"{amp}gt; {amp}lt;title{amp}gt;WSLD{amp}lt;/title{amp}gt; {amp}lt;script type="module" src="my-summary.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script type="module" src="my-detail.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;my-summary{amp}gt;{amp}lt;/my-summary{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; {amp}lt;template id="my-summary"{amp}gt; {amp}lt;my-detail{amp}gt;{amp}lt;/my-detail{amp}gt; {amp}lt;my-detail{amp}gt;{amp}lt;/my-detail{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;template id="my-detail"{amp}gt; {amp}lt;div{amp}gt;hello there{amp}lt;/div{amp}gt; {amp}lt;/template{amp}gt; 

мой-summary.js

 customElements.define('my-summary', class extends HTMLElement { constructor() { super(); const template = document.querySelector('#my-summary').content; this.attachShadow({mode: 'open'}).appendChild(template.cloneNode(true)); // this.appendChild(template.cloneNode(true)); const details = this.shadowRoot.querySelectorAll('my-detail'); console.log(details); details[0].setAttribute('a', '123'); } } ); 

мой-detail.js

 customElements.define('my-detail', class extends HTMLElement { constructor() { super(); const template = document.querySelector('#my-detail').content; const shadowRoot = this.attachShadow({mode: 'open'}).appendChild(template.cloneNode(true)); // this.appendChild(template.cloneNode(true)); } static get observedAttributes() { return ["a"]; } attributeChangedCallback(name, oldValue, newValue) { console.log(name, oldValue, newValue); } } ); 

Включения на стороне сервера (SSI) позволяют включать файлы HTML в файлы HTML. Это зрелая особенность большинства веб-серверов. Включите его и вставьте оператор включения в ваш HTML-код:

 {amp}lt;!--#include file="my-summary.html" --{amp}gt; {amp}lt;!--#include file="my-detail.html" --{amp}gt; 

Иногда SSI просто включен для файлов с расширением «.shtml».

Это самое быстрое решение, так как не требует дополнительных запросов. Весь HTML-код доставляется с первым запросом.

Есть несколько способов сделать это:

1) использование тега формы , менее рекомендуемого, из HTML5.

2) использование PHP, чтобы включить весь HTML-файл, поддерживает все версии.

в любом случае, вы должны получить свои результаты и включить 2 HTML-страницы на 1 странице.

Обычно, когда я пишу WebComponents, я создаю тег шаблона внутри моего файла js.

например:

 const template = document.createElement('template'); template.innerHTML = `{amp}lt;div{amp}gt;hello there{amp}lt;/div{amp}gt;`; 

Так что у меня больше контроля над моим шаблоном.

Я прилагаю ссылку с хорошо написанным руководством по освоению веб-компонентов: https://dev.to/thepassle/web-components-from-zero-to-hero-4n4m

Я бы использовал API fetch чтобы fetch содержимое вашего шаблона с сервера и поместить содержимое в узел DOM. Что-то вроде этого:

мой-detail.js

 (() ={amp}gt; { let templateContent = null; let onLoaded = []; (() ={amp}gt; { let templateContainer = document.createElement("div"); fetch("./my-detail.html") .then(res ={amp}gt; res.text()) .then(text ={amp}gt; { templateContainer.innerHTML = text; templateContent = templateContainer.firstChild.content; onLoaded.forEach(cb ={amp}gt; cb()); loaded = true; }); })(); customElements.define( "my-detail", class extends HTMLElement { loaded = false; constructor() { super(); const onLoad = () ={amp}gt; { this.attachShadow({ mode: "open" }).appendChild( templateContent.cloneNode(true) ); }; if (templateContent != null) { onLoad(); } else { onLoaded.push(onLoad); } } static get observedAttributes() { return ["a"]; } attributeChangedCallback(name, oldValue, newValue) { console.log(name, oldValue, newValue); } } ); })(); 

мой-detail.html

 {amp}lt;template id="my-detail"{amp}gt; {amp}lt;div{amp}gt;hello there{amp}lt;/div{amp}gt; {amp}lt;/template{amp}gt; 

Очевидно, что вы можете создать небольшую служебную функцию, чтобы упростить эту логику, чтобы не допустить попадания тонны повторяющегося кода в ваше приложение.