个人中心
gpt4 book ai didi

web-component - 是否可以使用 ES2015 导入模板标签？

转载 作者：行者123 更新时间：2023-12-03 17:03:41 35 4
gpt4 key购买 nike

我一直在阅读，但如果可以在不同的 html 文件中定义并使用 ESModule 导入以与 shadowRoot 一起使用，我没有找到任何东西，可以吗？

index.html ，我在其中定义了 2 个 javscript 模块并使用了我的组件 <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 , 在这个模块中只导出一个带有标签 html 的字符串。 
export const template = `
    <style>
        h3 {
            color: red;
            font-family: helvetica;
        }
    </style>
    <h3>Hello World</h3>
`;

js/component.js , 最后导入模块 my-template.js .我发现这种方法可以使用 ESmodule 从我的模块中解释模板。如何导入模板并在我的组件中使用(支持 firefox)？ 
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);

最佳答案

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

如果要导入元素，则需要将其放入 Javascript 文件，例如使用模板文字字符串。

模板.js :

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

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

模板.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>

或者，如果您想将 DOM 元素保存在 HTML 文件中，可以使用 fetch() 导入文件，如 this post about HTML Imports 中的代码所示。 .

关于web-component - 是否可以使用 ES2015 导入模板标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53063500/

35 4 0
文章推荐： export - 如何将我的 Qt 项目移动到另一台 PC
文章推荐： objective-c - 添加多个 NSSlider 以编程方式查看
文章推荐： xcode - 从 NSDate 获取该月第一天的星期名称
文章推荐： reactjs - 如何在 React 中将 props 传递给 Jest 测试