自定义元素上的自定义属性

Question

在自定义元素被解析并添加到 DOM 之后，我可以访问我在构造函数时创建的自定义属性，例如：

    const props = []
    return new CustomElement(props)

    // later in code

    class CustomElement {
      ...
      constructor(props) {
         this.customProperty = props
      }
      toString() {
         return this.outerHTML
      }
      ...
    }

    // later in code
    const ce = document.querySelector("custom-element")
    console.log( ce.customProperty ) // []

Answer 1

是的，与常规的 DOM 元素没有什么不同。

并且使用document.createElement("custom-element")您的属性也在那里。

注意后者只有constructor被执行。
所以你在connectedCallback中添加的道具还不会被设置。

对于这些类型的问题，请在 JSFiddle 或 CodePen 或https://webcomponents.dev中尝试您自己的代码