在 Web 开发中，我们经常需要使用自定义标签来实现一些定制化的需求。比如，我们可能需要一个具有特定样式和行为的标签来呈现数据。在这些情况下，自定义标签通常是一个不错的选择。然而，当我们使用自定义标签的时候，我们可能会遇到一个问题：如何选择自定义标签中的文本？
在传统的 HTML 中，我们可以使用 JavaScript 来选择文本。比如，可以使用 document.querySelector 或 document.getElementById 来获取文本的引用。例如，下面的代码示例中，我们使用 document.getElementById 来获取 ID 为 "myText" 的文本的引用：
<div id="myText">这是一段文本</div>
<script>
const myText = document.getElementById('myText');
console.log(myText.textContent); // 输出：这是一段文本
</script>然而，当我们使用自定义标签的时候，这种方法通常不适用。具体而言，如果我们要获取一个自定义标签中的文本，我们需要使用 Custom Elements API。下面，我们将详细讨论如何使用 Custom Elements API 来选择自定义标签中的文本。
Custom Elements API 概述
Custom Elements API 提供了一系列方法来创建和使用自定义元素。这些方法包括：
customElements.define: 定义一个自定义元素。customElements.get: 获取指定名称的自定义元素。HTMLElement.observedAttributes: 定义一个自定义元素能够响应的属性列表。connectedCallback: 当自定义元素被插入文档树时，调用此方法。disconnectedCallback: 当自定义元素被从文档树中移除时，调用此方法。attributeChangeCallback: 当自定义元素的某个属性被增加、移除或更改时，调用此方法。adoptedCallback: 当自定义元素被移动到新的文档时，调用此方法。
在本文中，我们将主要关注如何使用 customElements.get 和 connectedCallback 方法来选择自定义标签中的文本。
使用 Custom Elements API 选择自定义标签中的文本
首先，我们需要使用 customElements.define 方法来定义一个自定义元素。例如，下面的代码示例中，我们定义了一个名为 "my-custom-element" 的自定义元素：
class MyCustomElement extends HTMLElement {
connectedCallback() {
console.log(this.textContent);
}
}
customElements.define('my-custom-element', MyCustomElement);接下来，我们可以在 HTML 文件中使用这个自定义元素。例如，下面的代码示例中，我们在 HTML 文件中插入了一个名为 "my-custom-element" 的自定义元素：
<my-custom-element>这是一段自定义标签的文本</my-custom-element>
当页面加载的时候，浏览器会自动解析这个自定义元素，并调用 connectedCallback 方法。在 connectedCallback 方法中，我们可以使用 this.textContent 来获取这个自定义元素中的文本。例如，上面的代码示例中，我们使用 console.log 方法来输出这个自定义元素中的文本，即 "这是一段自定义标签的文本"。
需要注意的是，当我们使用 Custom Elements API 时，我们必须显式定义元素的属性和方法。换句话说，我们不能像在传统的 HTML 中一样随意操作元素的属性和方法。因此，在定义自定义元素时，我们需要手动实现 connectedCallback 方法，并在其中编写我们需要的代码。
自定义元素的属性
在有些情况下，我们可能需要获取或设置自定义元素的属性。在这种情况下，我们可以使用 HTMLElement.observedAttributes 和 attributeChangeCallback 方法来实现这个功能。
HTMLElement.observedAttributes 方法定义了一个数组，其中包含自定义元素能够响应的属性列表。例如，如果我们想要在自定义元素中定义一个名为 "my-attribute" 的属性，我们可以将它添加到 HTMLElement.observedAttributes 数组中：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------ --- -------------------- -
------ -----------------
-
------------------- -
-----------------------------------------------
-
----------------------------- --------- --------- -
--------------- ------- - ----------- --- --------------
-
-
------------------------------------------ -----------------在上面的代码示例中，我们使用 static get observedAttributes 方法定义了一个名为 "my-attribute" 的属性。然后，我们可以在 connectedCallback 方法中使用 this.getAttribute 来获取这个属性的值，并使用 attributeChangeCallback 方法来在属性更改时输出相关的信息。
总结
在本文中，我们详细讨论了如何使用 Custom Elements API 来选择自定义标签中的文本。具体而言，我们介绍了如何使用 customElements.get 和 connectedCallback 方法来获取自定义元素中的文本。我们还介绍了如何使用 HTMLElement.observedAttributes 和 attributeChangeCallback 方法来获取和设置自定义元素的属性。
需要注意的是，Custom Elements API 目前仅受到一些现代浏览器的支持，如 Chrome、Firefox 和 Safari。因此，在使用 Custom Elements API 的时候，我们需要确保目标用户能够使用这些浏览器之一。
示例代码
下面是本文中所使用的示例代码：
-- -------------------- ---- -------
-- -------
----- --------------- ------- ----------- -
------------------- -
------------------------------
-
------ --- -------------------- -
------ -----------------
-
----------------------------- --------- --------- -
--------------- ------- - ----------- --- --------------
-
-
------------------------------------------ -----------------
-- - ---- --------
------------------ --------------------------------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646db7e2968c7c53b0c5a9d4