嵌套 Web 组件“ES2015 风格”，如何从外部组件导入嵌套组件答案

【问题标题】：Nested Webcomponents "ES2015 style", how to import nested component from outer component嵌套 Web 组件“ES2015 风格”，如何从外部组件导入嵌套组件
【发布时间】：2017-06-15 09:57:22
【问题描述】：

我尝试以 ES2015 风格开发简单的 webcomponents。组件my-action 嵌套在组件my-action-bar 中。

在Github 的版本中，在我的客户端页面（demo-action-bar.html）中，我“导入”了这两个组件。我只想在我的html客户端页面中导入my-action-bar，但我不知道如何将my-action“导入”到my-action-bar组件中......

【问题讨论】：

为什么不使用 HTML 导入？
@Supersharp 你能详细说明一下吗？

标签： ecmascript-6 web-component es6-class custom-element

【解决方案1】：

您可以使用 HTML Imports 来加载 Web 组件依赖项：

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

【讨论】：

Mmmhhh，我希望有一个更好的解决方案，不需要为每个webcomponent（谁是js文件）创建一个html文件！
对于仅限 JS 的文件，您可以使用 XMLHttpRequest（或 fetch）。通常 Web 组件是 HTML + JS + CSS。
用 JS 编写组件的目的是为了简化转译任务。否则，我发现（对于像我这样的初学者）提取 JS 进行反编译很复杂......
不一定非要解压JS。你也可以在转译后将 JS 插入到 HTML 中。
所以你写了两个文件，wc.html（带有syle和html模板）和wc.js（es2015脚本）。你编译 wc.js 然后你把文件“合并”在一起？你知道使用这种方法的 Github 项目吗？