Javascript js文件中web组件的继承_Javascript_Inheritance_Web Component_Custom Element

Javascript js文件中web组件的继承

javascript inheritance

Javascript js文件中web组件的继承,javascript,inheritance,web-component,custom-element,Javascript,Inheritance,Web Component,Custom Element,第一部分：x输入。一个非常简单的输入组件，它什么都不做： (function() { class XInput extends HTMLElement { static get template() { const template = document.createElement('template'); template.innerHTML = ` <style>

第一部分：x输入。一个非常简单的输入组件，它什么都不做：

(function() {
    class XInput extends HTMLElement {
        static get template() {
            const template = document.createElement('template');
            template.innerHTML = `
                <style>
                    :host {
                        display: block;
                    }
                </style>

                <input id="input">
            `;
            return template;
        }

        constructor() {
            super();
            this.attachShadow({mode: 'open'});
            this.shadowRoot.appendChild(XInput.template.content.cloneNode(true));
        }
    }

    window.customElements.define('x-input', XInput);
})();

如果我尝试在页面中使用第二个元素->未捕获引用错误：XInput未定义

<html>
    <head>
        <script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
        <script src="/bower_components/shadydom/shadydom.min.js"></script>

        <script src="/webcomponents/input/x-input.js"></script>
        <script src="/webcomponents/input/x-input-number.js"></script>
    </head>
    <body>
        <p><x-input></x-input></p>
        <p><x-input-number></x-input-number></p>
    </body>
</html>

如果我在html文件中编写web组件，没有问题，但我必须使用html导入（我尽量不使用它）

如何实现这一点？

正如您所注意到的，XInput类仅在闭包中定义。如果您想在其他地方重用它，您可以全局定义它，或者借助

customElements.get（）

方法检索它

在x-input-number.js文件中：

或直接：

class XInputNumber extends customeElements.get('x-input') {}

JS类仅在当前上下文范围内可见。也许会有帮助。另外，请看

export

。事实上，我的对象进入了一种生活。如果我去掉这个生命，我的例子就行了。但它只起作用，因为我在标题中声明了两个web组件。如果我只想在我的页面中使用第二个web组件（因此我只声明这一个），它将无法工作（依赖XInput没有在任何地方声明…我不确定您是否注意到我提到的

export

。不清楚您的平台要求是什么。您可能可以使用测试代码。它应该在一些最新版本的浏览器中受支持。我的平台要求是IE11+，因此我不能使用任何东西…很好，谢谢。但我必须使用它将x-input.js文件复制到我的页面中。有可能避免吗？我不明白。你怎么能在没有声明的情况下使用x-input？如果在页面中，我只使用x-input-number，我不想声明x-input。我只想声明x-input-number。如果没有，使用这些web组件的开发人员必须知道x-input的继承方案所有web组件。如果尚未声明，则应从x-input-number导入JS文件。使用ES6导入/导出（尚未在所有浏览器中本机实现）或动态添加元素。我将尝试动态添加元素。ES6导入/导出不是我的解决方案。

(function() {
    var XInput = customeElements.get('x-input');

    class XInputNumber extends XInput {

    }

    window.customElements.define('x-input-number', XInputNumber);
})();

class XInputNumber extends customeElements.get('x-input') {}