在來自不同文件的 Web 組件槽中渲染 HTML5 模板

Question

我剛剛開始使用 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>

Answer 1

使用fetch() ，這是一個異步 function。

在您的BoostrapWrapper class 中，添加一個方法：

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 文件調用該方法。

Answer 2

使用fetch()我實現了一個名為createComponent()的方法，該方法采用路徑並獲取HTML文件，該文件包含一個<template>並將其附加到我的index.html中的#app-root

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

在來自不同文件的 Web 組件槽中渲染 HTML5 模板

問題描述

2 個解決方案

解決方案1
2 2020-04-17 10:44:25

解決方案2
0 2020-04-22 21:01:18

在來自不同文件的 Web 組件槽中渲染 HTML5 模板

問題描述

2 個解決方案

解決方案1 2 2020-04-17 10:44:25

解決方案2 0 2020-04-22 21:01:18

解決方案1
2 2020-04-17 10:44:25

解決方案2
0 2020-04-22 21:01:18