3

在创建 vanilla JS web-components 时，我试图找出一种将模板 html 保留在 JS 文件之外的方法，最好是在单独的 HTML 文件中。

我确实研究了本机 JS Web 组件实现的多个实现，特别是这里，单个文件和一个非常好的文章。

所有实现最终都使用字符串文字或类似方法将 html 模板放入 JS 中。我的问题是，是否可以制作两个单独的文件，例如 my-component.html模板和my-component.jsJS 代码？

我已经看到这种方法在 Aurelia 框架中运行良好，它非常干净并且将代码保留在它所属的位置。

我尝试使用 html 导入，通过为模板创建一个 html 文件并在其中包含 js。

<link rel="import" href="my-component.html">

理论上应该可以工作，但浏览器已经放弃了 html 导入。

我的第二种方法，这对我来说似乎有点 hack，但它确实有效的是从服务器中提取模板 htmlconnectedCallback

// my-component.js

class MyComponent extends HTMLElement {

    constructor() {
        super();
    }

    connectedCallback() {
        this.initShadowDom();

    }

    async initShadowDom() {
        let shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.innerHTML = await this.template;
    }

    async fetchData() {
        return await fetch('my-template-url')
            .then(function(response) {
                return response.text();
            });
    }

    get template() {

        return (async () => {
            return await this.fetchData();
        })();
    }
}
customElements.define('my-component', MyComponent);

从服务器端我只是返回纯 html

// my-component.html

<style>
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import 'https://code.getmdl.io/1.3.0/material.${this.theme}.min.css';
@import 'http://fonts.googleapis.com/css?family=Roboto:300,400,500,700';
@import 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'
}
table {
    border-collapse: collapse;
}
td {
    text-align: center;
    border: 1px solid #f7f7f7;
    padding: 1rem;
}
th {
    background-color: #f7f7f7;
    text-align: center;
    padding: 1em;
    border: 1px solid #e9e9e9;
}
    </style>
<div class="search-list table-responsive">
<table width="100%" class="table table-bordered table-striped table-hover">
    <thead class="thead-light">
    <tr>
        <th width="1rem">
            <input type="checkbox">
        </th>
        <th>
            ID
        </th>
        <th>
            name
        </th>

    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>
            1
        </td>
        <td>
            some name
        </td>

    </tr>

    </tbody>
    </table>
</div>

<template>请注意我是如何在来自服务器的响应中完全 跳过标签的，显然如果我使用<template>标签，我将不得不使用 dom 解析来实际将 html 放入 dom。

这确实有效，但它看起来很hackish。

有没有人有更好的方法？

4

1 回答 1

1

你的解决方案很好，但你可以削减 Javascript 代码：

class MyComponent extends HTMLElement {

    async connectedCallback() {
        let res = await fetch( 'my-component.html' )

        this.attachShadow( { mode: 'open' } )
            .innerHTML = await res.text()
    }

}
customElements.define( 'my-component', MyComponent )
于 2019-04-08T12:26:40.530 回答