所以我知道如何创建自定义元素，并且已经制作了 2 个令我满意的元素。 我的两个元素看起来像这样:
let menuPicker = Object.create(HTMLElement.prototype);
menuPicker.initialized = false;
menuPicker._init = function(){
...
}
...
menuPicker.attachedCallback = menuPicker._init;
menuPicker.createdCallback = menuPicker._init;
...
document.registerElement('menu-picker', {
prototype: menuPicker
});
这一切都有效，但是这一次我想要一个 JS 类。具体来说这个功能:
class test {
get item(){...}
set item(){...}
}
所以我想我可以执行以下操作来轻松实现这一点。
class listBox extends HTMLElement.prototype {
initialized = false;
constructor(props){
super(props);
this.attachedCallback = this._init;
this.createdCallback = this._init;
}
_init () {
if(this.initialized) return;
this.initialized = true;
this.style.display = "block";
this.appendChild(document.createElement('div'));
}
}
document.registerElement('list-box', {
prototype: listBox
});
但是我收到错误 Class extends value #<HTMLElement> is not a constructor or null 。
所以现在我陷入困境，找不到使用类来构造自定义 HTML 元素的方法。
简化:
How do I create a custom element using a JS class to create the properties for the element?
最佳答案
这是创建自定义元素的示例
//ListBox.js
export default class ListBox extends HTMLElement {
// observe attributes of custom element
static get observedAttributes() {
return ["disp", "text"];
}
get myAction() {
return this.hasAttribute("open");
}
set myAction(val) {
if (val) {
this.setAttribute("open", "");
} else {
this.removeAttribute("open");
}
}
constructor() {
super();
this.initialized = false;
this.div = document.createElement("div");
// get and assigns value from props "disp"
this.div.style.display = this.getAttribute("disp");
// get and assigns value from props "text"
this.div.innerHTML = this.getAttribute("text");
this.appendChild(this.div);
}
connectedCallback() {
// didMount
// your methode here
this.initialized = true;
console.log("custom element added to page");
}
disconnectedCallback() {
// unmount
console.log("custom element remove from page");
}
attributeChangedCallback(name, oldValue, newValue) {
// observed props
console.log("props", arguments);
// get and assigns value from props "text"
if (name === "text" && oldValue !== newValue) {
this.div.innerHTML = newValue;
}
}
}
在你的html脚本标签中调用你的index.js添加type="module"
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<list-box text="Some text here" disp="block"></list-box>
</div>
<script src="src/index.js" type="module"></script>
</body>
</html>
在你的index.js中导入你的组件并做一些事情
import ListBox from "./component/ListBox";
customElements.define("list-box", ListBox);
// change props "text value"
document
.querySelector("list-box")
.setAttribute("text", `Change the value of props "text"`);
关于javascript - 如何使用 JS 类创建自定义元素来创建元素的属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60049697/