在现代 Web 开发中，使用自定义元素可以让开发者创建具有完全自定义行为的 HTML 标签。为了使自定义元素更加灵活，开发者可以为其添加属性，以便与其他元素和脚本之间进行通信。然而，为了确保自定义元素的正确使用，我们必须强制它们只能接受特定的属性值。本篇文章将介绍在 Custom Elements 中如何实现这一功能。
步骤一：定义元素
首先，我们需要使用 window.customElements.define() 方法来定义我们的自定义元素。以下是一个例子：
class MyElement extends HTMLElement {
constructor() {
super();
}
}
window.customElements.define('my-element', MyElement);这个例子中，我们创建了一个名为 MyElement 的自定义元素。我们可以用 my-element 标签名称来调用它。
步骤二：定义属性
接下来，我们需要在 MyElement 类中定义我们要使用的属性。我们将使用 static get observedAttributes() 方法来定义这些属性。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------ --- -------------------- -
------ -----------------
-
------------- -
--------
-
-- ---
-这个例子中，我们定义了一个名为 my-attribute 的属性。在这里，我们告诉浏览器当元素的 my-attribute 属性发生变化时自动调用 attributeChangedCallback() 方法。我们现在可以使用这个方法来在属性改变时对它进行检查。
步骤三：检查属性值
最后，我们在 attributeChangedCallback 方法中定义自定义属性的检查代码。
-- -------------------- ---- -------
----- --------- ------- ----------- -
-----
------------------------------ --------- --------- -
-- ----- --- --------------- -
-- --------- --- --------- -- -------- --- --------- -- -------- --- ---------- -
----- --- -------------------- -- --- - ----- ----- --- ----------------
-
-
-
-在此例中，我们检查了 my-attribute 的新值是否是我们想要接受的值之一。如果不是，我们将抛出一个错误，以便在控制台中显示错误消息。
最后，完整的代码如下：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------ --- -------------------- -
------ -----------------
-
------------- -
--------
-
------------------------------ --------- --------- -
-- ----- --- --------------- -
-- --------- --- --------- -- -------- --- --------- -- -------- --- ---------- -
----- --- -------------------- -- --- - ----- ----- --- ----------------
-
-
-
-
------------------------------------------ -----------现在，当我们在我们的 MyElement 元素中使用属性值 "option4" 时，我们得到了一个 "ERROR: "option4" is not a valid value for my-attribute." 的错误消息。
这就是在 Custom Elements 中强制使用特定的属性值所需的全部步骤。我们可以使用此方法轻松创建强制属性值的自定义元素，在我们的程序中避免一些常见的错误和 bug。
结论
在本文中，我们介绍了如何在 Custom Elements 中强制使用特定的属性值。我们从定义元素和属性开始，并使用 attributeChangedCallback() 方法来检查新值是否是我们想要的值。这里介绍的方法可以让我们轻松创建具有正确属性值检查的元素。
通过掌握这个技术，我们可以在我们的元素中定义更多的限制，以提供更好的错误处理和更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6719f9e69babaf620f9ff974