如何为 Custom Elements 设置默认属性值？

在 Web Components 中，Custom Elements 是用来创建自定义 HTML 元素的一种技术。通常情况下，我们会需要为自定义元素设置一些默认属性值以便让其在不传入任何参数的情况下也能正常运行。本文将介绍如何为 Custom Elements 设置默认属性值，并提供相应的示例代码。

了解 Custom Elements 中的属性

在 Custom Elements 中，定义元素的属性需要通过 Object.defineProperties() 方法。该方法允许我们在元素定义的对象或类上定义属性，并设置它们的默认值。在下面的示例中，我们将创建一个名为 my-element 的自定义元素，其中包含一个名为 message 的属性：

-- -------------------- ---- -------
----- --------- ------- ----------- -
  ------------- -
    --------
    ------------------- ----- ------ ---
    ------------------------- - -
      ---------- -------------------
    --
  -
  
  ------ --- -------------------- -
    ------ ------------
  -
  
  --- --------- -
    ------ -----------------------------
  -
  
  --- -------------- -
    ---------------------------- -------
  -
  
  ------------------------------ --------- --------- -
    -- ----- --- ---------- -
      ------------------------------------------------- - ---------
    -
  -
-

----------------------------------- -----------

在上面的示例中，我们通过 observedAttributes 属性指定了需要观察的属性。在元素创建时，浏览器会自动调用该属性。我们还定义了一个 getter 和 setter 方法来获取和设置属性。最后，我们实现了 attributeChangedCallback() 方法，该方法在元素的任何属性改变时都会调用。

设置默认属性值

在上面的示例中，我们实现了一个 message 的属性。现在假设我们想要这个属性默认值为 "World"，该怎么做呢？我们能手动在元素创建时给属性赋值，例如：

<my-element message="World"></my-element>

但这并不理想，因为我们使用自定义元素的时候可能会有很多重复操作。相反，我们可以修改我们的元素定义，在元素创建时为属性赋默认值。具体做法是在我们的构造函数中设置初始状态：

constructor() {
  super();
  this.attachShadow({ mode: "open" });
  this.shadowRoot.innerHTML = `
    <h1>Hello, <slot></slot>!</h1>
  `;
  this.message = this.getAttribute("message") || "World";
}

在上面的示例中，我们为 message 属性设置了一个默认值 "World"。如果元素创建时传入了 message 属性，则使用传入的值；否则，使用默认值 "World"。

最后，我们在 attributeChangedCallback() 方法中对新值进行检测并更新元素的状态：

attributeChangedCallback(name, oldValue, newValue) {
  if (name === "message") {
    this.message = newValue || "World";
    this.shadowRoot.querySelector("slot").textContent = this.message;
  }
}

完整示例代码

下面是我们所实现的自定义元素（设置 message 属性的默认值为 "World"）的完整示例代码：

-- -------------------- ---- -------
----- --------- ------- ----------- -
  ------------- -
    --------
    ------------------- ----- ------ ---
    ------------------------- - -
      ---------- -------------------
    --
    ------------ - ---------------------------- -- --------
  -
  
  ------ --- -------------------- -
    ------ ------------
  -
  
  --- --------- -
    ------ ---------------------------- -- --------
  -
  
  --- -------------- -
    ---------------------------- -------
  -
  
  ------------------------------ --------- --------- -
    -- ----- --- ---------- -
      ------------ - -------- -- --------
      ------------------------------------------------- - -------------
    -
  -
-

----------------------------------- -----------

结语

在本文中，我们学习了如何为 Custom Elements 设置默认属性值。通过在构造函数中设置默认状态，并在 attributeChangedCallback() 方法中对新值进行检测，我们能避免手动添加属性的繁琐操作，并使我们的自定义元素更易于使用。希望本文能为你在使用 Custom Elements 创造出更好的用户体验提供一定的帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/678266e1935627c900064cc6