Javascript 如何使用 Web 组件创建具有属性的元素

Question

使用 Web 组件 - 如果您不知道这意味着什么，请不要回答！！！！！！

我想动态创建一个带有属性的元素，而不是在创建对象后添加它们（setAttribute 不起作用）。

Point：我已经设置了一个 Web 组件来与其构造函数 (this.getAttribute) 内的属性进行交互。如果您动态创建元素 (document.createElement)，则属性为空。之后设置它们将不起作用。

注意：我知道我可以通过另一种方式获得所需的功能，这只会创建最用户友好的 Web 组件版本（最少的代码）。

class List extends HTMLElement {
    constructor(temp) {
        super();
             if(this.getAttribute('att')!=null){
                 do stuff
             }
     }
 }

其他代码

document.createElement('list')

Answer 1

这里是一个快速示例，展示了如何在 Web 组件类定义中引用和设置属性。 你不能从构造函数中引用属性，我认为这实际上是一个静态方法，而不是实例方法。

connectedCallback() 可能吗？采用回调将允许与元素对象交互。

这演示了测试属性、设置属性和值以及获取值。 我使用数据集https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset因为这是自定义值理想的位置。

class UIInput extends HTMLElement {
  constructor() {
    super();
    // will cause issue if un commented
    console.log(`'data-testing' value is ${this.dataset.testing}`);
  };

  connectedCallback() {
    // empty signature
    // test for attribute
    if (!this.dataset.testing) {
      console.log(`'data-testing' attribute absent`);
      //print the element
      console.log(this);
      return;
    }
    // set / assign an attribute value
    this.dataset.connected = true;
    console.log(`'data-testing' value is ${this.dataset.testing} and 'connected' is ${this.dataset.connected}`);
    // print the element
    console.log(this);

  };
};
customElements.define('ui-input', UIInput);

<ui-input id="empty">Empty!</ui-input>
<br/>
<ui-input id="supplied" data-testing="Value Supplied">Value Supplied</ui-input>

Answer 2

这是一个游乐场，显示何时和何时不可以在 constructor

 中使用

属性

https://jsfiddle.net/WebComponents/cxntaodk/

运行代码，自己解释一下

console

显示的内容

<div id="container"></div>
<script>
  class BaseClass extends HTMLElement {
    constructor() {
      super();
      console.log(this.nodeName, this.id||"NO ID", "constructor");
    }
    connectedCallback() {
      this.innerHTML = this.id;
    }
  }
  customElements.define("component-a", class extends BaseClass {});
  container.innerHTML += `<component-a id="1"></component-a><component-b id="2">Hello! Web Component</component-b>`;
</script>
<component-a id="3"></component-a><component-b id="4"></component-b>
<script>
  customElements.define("component-b", class extends BaseClass {});
  container.innerHTML += `<component-a id="5"></component-a><component-b id="6">Hello! Web Component</component-b>`;
  const element = (tag, props = {}) => Object.assign(document.createElement(tag), props);
  document.body.append(
    element("component-a", {
      id: "7"
    }),
    element("component-b", {
      id: "8"
    })
  );
</script>

• constructor

  只能访问属性当DOM被解析时

• 设置

  innerHTML

  设置所有属性（我认为OP正在问）

• createElement

  仅首先运行 构造函数