gpt4 book ai didi

javascript - js文件中web组件的继承

转载 作者:行者123 更新时间:2023-11-30 15:02:59 27 4
gpt4 key购买 nike

第一个组件: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);
})();

我的组件在一个 .js 文件中,所以我不需要在我的客户端页面中使用 HTML 导入。现在,我需要第二个继承自 x-input 的 Web 组件:

(function() {
class XInputNumber extends XInput {

}

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

如果我尝试在页面中使用第二个元素 -> Uncaught ReferenceError: XInput is not defined.

<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 文件中:

(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') {}

关于javascript - js文件中web组件的继承,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46219444/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com