Question

在创建普通的JS Web组件时，我试图找到一种方法来将模板html保留在JS文件之外，最好放在单独的HTML文件中。

我确实研究了本地JS Web组件实现的多种实现，尤其是here，single file和a very nice writeup here。

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

我已经看到这种方法在Aurelia框架中很好地工作，它非常干净，并且将代码保留在其所属位置。

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

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

从理论上讲应该可以，但是html导入已被浏览器放弃。

我的第二种方法，对我来说似乎有点hack，但它确实有效从connectedCallback

的服务器中提取模板html

// 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。

这确实有效，但是看起来很黑。

有人能有更好的方法吗？

Answer 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 )

使用单独的html和js文件创建香草js网络组件

1 个答案: