Стиль вложенных веб-компонентов ES2015, как импортировать вложенный компонент из внешнего компонента

Я пытаюсь разрабатывать простые веб-компоненты в стиле ES2015. Компонент my-action вложен в компонент my-action-bar.

В версии, которая находится в Github, на моей клиентской странице (demo-action-bar.html) я "импортирую" два составные части. Я хочу импортировать только my-action-bar на мою клиентскую страницу html, но я не знаю, как «импортировать» my-action в компонент my-action-bar...


person Olof    schedule 30.01.2017    source источник
comment
почему вы не используете импорт HTML?   -  person Supersharp    schedule 30.01.2017
comment
@Supersharp Не могли бы вы уточнить?   -  person Olof    schedule 31.01.2017


Ответы (1)


Вы можете использовать Импорт HTML для загрузки зависимостей веб-компонентов:

В my-action.html:

<script src="my-action.js"></script>

В my-action-bar.html :

<link rel="import" href="my-action.html"> 
<script src="my-action-bar.js></script>

В demo-action-bar.html:

<link rel="import" href="my-action-bar.html">
...
<my-action-bar></my-action-bar>

В качестве альтернативы вы можете использовать стандартные XMLHttpRequest или fetch:

В my-action-bar.js:

    var xhr = new XMLHttpRequest
    xhr.open( 'GET', 'my-action.js' )
    xhr.onload = function ()
    {
        var script = document.createElement( 'script' )
        script.innerHTML = xhr.response
        document.head.appendChild( script )
    }
    xhr.send()    

Или вы можете использовать сторонний загрузчик модулей, например RequireJS.

person Supersharp    schedule 30.01.2017
comment
Mmmhhh, я надеюсь, что это лучшее решение, которое не требует создания html-файла для каждого веб-компонента (который является js-файлом)! - person Olof; 31.01.2017
comment
Для файлов только для JS вы можете использовать XMLHttpRequest (или выборку). Обычно веб-компоненты представляют собой HTML + JS + CSS. - person Supersharp; 31.01.2017
comment
Целью написания компонента на JS было упростить задачу транспиляции. В противном случае мне сложно (для такого новичка, как я) извлечь JS для выполнения детранспиляции... - person Olof; 31.01.2017
comment
Вам не обязательно извлекать JS. Вы также можете вставить JS в HTML после транспиляции. - person Supersharp; 31.01.2017
comment
Итак, вы пишете два файла: wc.html (с шаблоном syle и html) и wc.js (скрипт es2015). Вы транспилируете wc.js и после этого объединяете файлы? Знаете ли вы проект Github, который использует этот метод? - person Olof; 31.01.2017
comment
Нет, извините, я не использую транспилятор. - person Supersharp; 31.01.2017
comment
Я уже использую crisper для разделения html и javascript на два файла, но я не знаю, как объединить два файла. Есть идеи ? - person Olof; 01.02.2017
comment
Вы должны использовать gulp или grunt. - person Supersharp; 01.02.2017