我刚刚开始使用Web组件，并尝试将重复的HTML代码抽象到他们自己的文件中，所以不像我对<nav-bar>和<bootstrap-wrapper>所做的那样，而更多的是基于组件的方法。
现在，我想以这样一种方式构建我的项目，即我的template被发送到index.html中的slot进行渲染。
如何在index.html内渲染welcome.html，另外，如何从welcome.html导航到另一个模板
索引.html
<!DOCTYPE html>
<html lang="en">
<body>
<bootstrap-wrapper>
<nav-bar></nav-bar>
<span slot="content"></span>
</bootstrap-wrapper>
</body>
<script src="actio.js"></script>
</html>
阿克蒂奥.js
customElements.define(
'nav-bar',
class NavBar extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<nav class="nav">
<a class="nav-link" href="welcome.html">Home</a>
<a class="nav-link" href="enter-names.html">Enter Names</a>
<a class="nav-link" href="calculator.html">Calculator</a>
<a class="nav-link" href="history.html">History</a>
</nav>
`;
}
}
);
const template = document.createElement('template');
template.innerHTML = `
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-8 col-lg-6">
<div class="jumbotron bg-dark text-white">
<p><slot name="content" /></p>
</div>
</div>
</div>
</div>
`;
customElements.define(
'bootstrap-wrapper',
class BootstrapWrapper extends HTMLElement {
constructor() {
super();
this.attachShadow({
mode: 'open'
}).appendChild(
template.content.cloneNode(true)
);
}
}
);
欢迎.html
<template class="welcome">
<h1>Household Budget Calculator</h1>
<h3>No more arguments about how to divide your household expenses!</h3>
<h4>How it works:</h4>
<ol>
<li>Enter names</li>
<li>Fill household expenses</li>
<li>Each of you fills in their income</li>
<li>Hit Calculate</li>
<li>Enjoy a blissful partnership!</li>
</ol>
<button onclick="location.href='enter-names.html'"
type="button"
class="btn btn-primary">Enter Names</button>
</template>
使用fetch()，这是一个异步函数。
在BoostrapWrapper类中，添加一个方法：
async function loadTemplate( filename ) {
var response = await fetch( filename )
var text = await response.text()
this.querySelector( span[slot=content]' ).innerHTML = text
}
无需在<template>元素中包含代码，除非您在其中使用 Javascript 代码。在后一种情况下，您需要创建一个临时<template>元素。
然后，可以使用任何 HTML 文件调用该方法。
使用fetch()我实现了一个名为createComponent()的方法，该方法采用路径并获取一个HTML文件，其中包含一个<template>并将其附加到我的#app-rootindex.html
主.js
function createComponent(path) { // path is relative to root of project
fetch(path)
.then(function (response) {
return response.text();
})
.then(function (html) {
const doc = new DOMParser().parseFromString(html, 'text/html');
const template = doc.querySelector('head > template');
document.querySelector('#app-root').innerHTML = '';
document.querySelector('#app-root').appendChild(template.content);
})
.catch(function (err) {
console.error('Something went wrong.', err);
});
}
索引.html
<!DOCTYPE html>
<html lang="en">
<body>
<span id="app-root">
<!-- APP ROOT -->
</span>
</body>
<script src="main.js"></script>
</html>
模板.html
<template>
<div class="welcome">
<h2>Welcome to the Household Budget Calculator</h2>
<p>We help you divide household expenses fairly.</p>
<h4>How it works:</h4>
<ol>
<li>Enter names</li>
<li>Fill household expenses</li>
<li>Each of you fills in their income</li>
<li>Hit Calculate</li>
<li>Enjoy a blissful partnership!</li>
</ol>
<div class="button-area">
<button onclick="next()">Next</button>
</div>
</div>
</template>