Возможен ли импорт шаблона тега с ES2015? - PullRequest
Новая
       6

Возможен ли импорт шаблона тега с ES2015?

0 голосов
/ 30 октября 2018

Я читал, но я ничего не нахожу, если возможно определить в другом 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);

Ответы [ 2 ]

0 голосов
/ 30 октября 2018

Я согласен с @Supersharp. Нет реальной причины использовать объект template, поскольку вы можете просто установить innerHTML теневого DOM.

Чтобы привести пример @ Supersharp на шаг вперед, приведем код с улучшением: 

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

class HelloWorld extends HTMLElement{

    constructor(){
        super();
        this.attachShadow({mode: 'open'}).innnerHTML = template'
    }
}

window.customElements.define('hello-world',HelloWorld);
0 голосов
/ 30 октября 2018

Вы можете импортировать только файлы Javascript как модули ES6.

Если вы хотите импортировать элемент, вам нужно поместить его в файл Javascript, например, используя буквенную строку шаблона.

template.js 

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

Но это не имеет смысла. Вместо этого вы можете определить шаблон содержимого напрямую.

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>

В качестве альтернативы, если вы хотите сохранить свой DOM-элемент в HTML-файле, вы можете использовать fetch () для импорта файла, о чем свидетельствует код, приведенный в этом посте об импорте HTML .

...