是否可以使用 ES2015 导入模板标签?

本文介绍了是否可以使用 ES2015 导入模板标签?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在阅读，但我没有找到任何内容，是否可以在不同的 html 文件中定义并使用 ESModule 导入以与 shadowRoot 一起使用，可能是吗?

index.html，我在其中定义了 2 个 javscript 模块并使用了我的组件 <hello-world></hello-world>

<html lang="zh-cn"><头><meta charset="utf-8"><title>我的第一个组件</title><meta name="description" content="我的第一个组件"><meta name="author" content="Ismael Rodriguez"><script type="module" src="js/my-template.js"></script><script type="module" src="js/component.js"></script><!--<模板 id="我的模板"><h2>你好世界</h2>--><身体><h1>网络组件</h1><hello-world></hello-world>

js/my-template.js，在这个模块中只导出一个带有标签html的字符串.

export const 模板 = `<风格>h3{红色;字体系列:helvetica；}</风格><h3>你好世界</h3>`;

js/component.js，最后导入模块my-template.js.我发现这种方法可以使用 ESmodule 从我的模块中解释模板.我如何导入模板并在我的组件中使用(支持 Firefox)?

import {template} from './my-template.js';class HelloWorld 扩展 HTMLElement{构造函数(){极好的();让 shadowRoot = this.attachShadow({mode: 'open'})const t = this.createTemplate(模板);const 实例 = t.content.cloneNode(true);shadowRoot.appendChild(instance);/*console.log(模板);const t = document.querySelector('#my-template');const 实例 = t.content.cloneNode(true);shadowRoot.appendChild(instance);*/}创建模板(html){const template = document.createElement('template');html = html.trim();模板.innerHTML = html;返回模板；}}window.customElements.define('hello-world',HelloWorld);

解决方案

您只能将 Javascript 文件作为 ES6 模块导入.

如果您想导入一个元素，您需要将它放在一个 Javascript 文件中，例如使用模板文字字符串.

template.js:

export var template = `<h1>内容标题</h1><div>内容</div></模板>`

但这没有意义.相反，您可以直接定义内容模板.

templates.js:

export var literal1= `<h1>内容标题</h1><div>内容</div>`

index.html:


<脚本类型=模块">从 './templates.js' 导入 * 作为模板host.attachShadow( {mode:'open'} ).innerHTML = 模板.literal1

或者，如果您想将 DOM 元素保留在 HTML 文件中，您可以使用 fetch() 导入文件，如这篇关于 HTML 导入的博文.

I'd been reading but I don't find anything if is it possible define in a different html file and import with ESModule to use with shadowRoot, could be?

index.html, where I define2 javscript modules and use my component <hello-world></hello-world>

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My First Component</title>
    <meta name="description" content="My First Component">
    <meta name="author" content="Ismael Rodriguez">
    <script type="module" src="js/my-template.js"></script>
    <script type="module" src="js/component.js"></script>
    <!--
        <template id="my-template">
            <h2>Hello World</h2>
         </template>
    -->
</head>

<body>
    <h1>Web Component</h1>
    <hello-world></hello-world>
</body>

js/my-template.js, In this module only export a string which has tags html.

export const template = `
    <style>
        h3 {
            color: red;
            font-family: helvetica;
        }
    </style>
    <h3>Hello World</h3>
`;

js/component.js, Finally import the module my-template.js. I have found this way to interpret the template from my module using ESmodule. How Could I import the template and use in my component (with firefox support)?

import {template} from './my-template.js';

class HelloWorld extends HTMLElement{

    constructor(){
        super();
        let shadowRoot = this.attachShadow({mode: 'open'})
        const t = this.createTemplate(template);
        const instance = t.content.cloneNode(true);
        shadowRoot.appendChild(instance);

        /*console.log(template);
        const t = document.querySelector('#my-template');
        const instance = t.content.cloneNode(true);
        shadowRoot.appendChild(instance);*/

    }

    createTemplate(html){
        const template = document.createElement('template');
        html = html.trim();
        template.innerHTML = html;
        return template;
    }
}

window.customElements.define('hello-world',HelloWorld);

解决方案

You can only import Javascript files as ES6 Modules.

If you wan to import a element, you'll need to put it a Javascript file, for example by using a template literal string.

template.js:

export var template = `<template>
    <h1>Content title</h1>
    <div>Content</div>
  </template>`

But it doesn't make sense. Instead you could define the content template directly.

templates.js:

export var literal1= `
    <h1>Content title</h1>
    <div>Content</div>
  `

index.html:

<div id=host></div>
<script type="module">
    import * as templates from './templates.js'
    host.attachShadow( {mode:'open'} )
        .innerHTML = templates.literal1
</script>

Alternatly, if you want to keep your DOM element in a HTML file, you can use fetch() to import a file, as demonstrated by the code snipped in this post about HTML Imports.

这篇关于是否可以使用 ES2015 导入模板标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

es2015

是否可以使用 ES2015 导入模板标签?

问题描述