嵌套 Web 组件 "ES2015 style"，如何从外部组件导入嵌套组件

Question

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

在Github的版本中，在我的客户端页面(demo-action-bar.html)，我"import"这两个组件。我只想在我的 html 客户端页面中导入 my-action-bar，但我不知道如何将 "import" my-action 导入 my-action-bar 组件...

Answer 1

您可以使用 HTML Imports 加载 Web Components 依赖项：

在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这样的第三方模块加载器。

嵌套 Web 组件 "ES2015 style"，如何从外部组件导入嵌套组件

Nested Webcomponents "ES2015 style", how to import nested component from outer component

web-component

ecmascript-6

custom-element

es6-class