我可以在JS中实例化自定义元素的同时设置属性和插槽文本吗

Question

如果我在 HTML 中使用自定义元素，则提供的属性在构造函数中都可用

<my-element myparam="fruit">I like bananas</my-element>

constructor() {}
    super()
    this.param = this.getAttribute("myparam")

> this.param = "fruit"

但是如果我使用 document.createElement 在 JS 中创建自定义元素的实例，构造函数会立即运行，而属性不可用。

const elem = document.createElement("my-element")

> this.param = null

一旦我将元素附加到 DOM 节点，我就可以挂钩 attributeChangedCallback，它在我调用 elem.setAttribute 时触发，以设置 this.param。但这似乎有点丑陋。我觉得好像你不应该为了让组件可以通过 JS 和 HTML 使用而创建额外的方法。似乎 textNodes / Children 也有类似的情况。

在以编程方式创建节点时，有什么方法可以使构造函数可以使用属性和子节点吗？

编辑：所以看起来寻求这样做是不好的做法，我应该只尝试访问 connectedCallback() 函数中的属性。只要我在使用 .appendChild 添加组件之前使用 setAttribute，值就应该在那个时候可用。

Answer 1

当您使用 document.createElement 时，构造函数在元素附加到 DOM 之前运行，因此您将无法访问属性，因为它们尚不存在。

您可以访问 connectedCallback 中的属性。以下基本示例有效

customElements.define(
  "my-el",
  class extends HTMLElement {
    constructor() {
      super();
    }
    
    connectedCallback() {
      this.foo = this.getAttribute("foo")
      console.log("foo", this.foo) // logs "bar"
    }
  }
);

const el = document.createElement("my-el");
el.setAttribute("foo", "bar");
document.body.append(el)

您有一些拼写错误：my-element 与 my-component、this.getAttribute("myparam") 当您将上述属性称为 param 时

我可以在JS中实例化自定义元素的同时设置属性和插槽文本吗

Can I set attributes and slot text at the same time as instantiating a custom element in JS

javascript

web-component