이 튜토리얼에서는 사용자 정의 태그를 사용하여 HTML 언어를 확장하는 것이 얼마나 쉬운지 보여 드리겠습니다. 사용자 정의 태그는 다양한 동작을 구현하는 데 사용될 수 있으므로 코드 작성을 줄이고 HTML 문서를 더 단순하게 만드는 매우 편리한 방법입니다.
사용자 정의 태그에 대해 자세히 알아보려면 Shadow DOM을 사용하여 캡슐화된 사용자 정의 태그 생성에 대한 내 기사를 확인하세요.
예를 들어 HTML의 경우 <b></b> 标记来显示粗体文本。如果您需要列表，则可以对每个列表项使用 <ul></ul> 标签及其子标签 <li>를 사용할 수 있습니다. 태그는 브라우저에 의해 해석되며 CSS와 함께 작동하여 웹 콘텐츠가 표시되는 방식과 콘텐츠의 일부가 작동하는 방식을 결정합니다.
때로는 하나의 HTML 태그만 사용하는 것만으로는 웹 애플리케이션의 필수 기능을 충족하는 데 충분하지 않을 수 있습니다. 일반적으로 이 문제는 JavaScript 및 CSS와 함께 여러 HTML 태그를 사용하여 해결되지만 이 솔루션은 그다지 훌륭하지 않습니다.
더 우아한 해결책은 사용자 정의 태그를 사용하는 것입니다. 이는 브라우저가 의도한 기능을 렌더링하기 위해 해석하는 에 포함된 식별자입니다. 일반 HTML 태그와 마찬가지로 페이지에서 사용자 정의 태그를 여러 번 사용할 수 있어야 하며 사용자 정의 태그의 기능을 지원하는 태그 속성과 하위 태그도 가질 수 있어야 합니다.
간단히 말하면, 맞춤 요소를 사용하여 다음 기능을 잠금 해제할 수 있습니다.
이 글에서는 <codingdude-gravatar></codingdude-gravatar>라는 맞춤 태그를 만들어 맞춤 요소에 대해 알아봅니다. 이 사용자 정의 라벨은 특정 이메일 주소에 대한 Gravatar 이미지를 표시합니다.
최신 브라우저의 customElements API를 사용하면 작업이 쉬워집니다!
태그를 구현하고 테스트하려면 다음과 같은 몇 가지 항목을 만들어야 합니다.
index.html 파일을 편집하고 내용을 다음과 같이 만들어 보겠습니다.
으아아아지금 브라우저에서 index.html을 로드하면 아직 사용자 정의 마크업에 대한 코드를 구현하지 않았기 때문에 결과가 그다지 인상적이지 않습니다.
한 가지 주의할 점은 브라우저가 매우 관대하기 때문에 문서에 알 수 없는 태그가 있을 수 있으며 브라우저는 이를 무시한다는 것입니다. 사용자 정의 라벨이 내 이메일의 Gravatar 이미지를 실제로 표시하려면 먼저 Gravatar의 작동 방식을 이해해야 합니다.
맞춤 라벨을 만들려면 window.customElements.define()을 사용해야 합니다.
customElements.define() 中的第一个参数是标记的名称。这就是我们在 HTML 文件中提到的。该名称应始终带有破折号 (-)。名称类似于 <codingdudegravatar></codingdudegravatar> 태그가 잘못되었습니다. 이를 통해 파서는 일반 요소와 사용자 정의 태그를 구별할 수 있습니다.
customElements.define() 有第二个可选对象。该对象用于提及新元素的原型。默认情况下，自定义元素继承自 HTMLElement。上面的代码相当于下面的代码：
customElements.define("codingdude-gravatar", CodingDudeGravatar);
如果您希望创建扩展另一个 HTML 元素的自定义元素，则必须在 customElements.define() 中扩展本机元素。继承本机元素的自定义元素也称为“类型扩展自定义元素”。
customElements.define("codingdude-gravatar", class extends HTMLButtonElement {...});
还有一些需要注意的事情：
DOMException。
<li>自定义元素标签不能自动关闭。
HTML 元素的所有标准规则都适用于自定义元素。就像标准元素一样，您可以使用 JavaScript 在 DOM 中创建自定义元素，或在 HTML 中声明它。
在 HTML 中声明自定义元素：
<codingdude-gravatar></codingdude-gravatar>
使用 JavaScript 在 DOM 中创建自定义元素：
var codingdudeGravatar = document.createElement('codingdude-gravatar');
codingdudeGravatar.addEventListener('click',function(e){});
在 HTML 中实例化类型扩展元素：
<button is="codingdude-gravatar">
使用 JavaScript 在 DOM 中创建类型扩展元素：
var codingdudeGravatar = document.createElement('button', 'codingdude-gravatar');
在自定义标签中添加标记相当简单。首先，您需要创建一个扩展父 HTML 元素的类。在我们的例子中，我们将扩展 HTMLElement。在 HTMLElement 中，我们将使用 constructor 添加事件侦听器并调整自定义标记的 innerText 。记得调用 super() 因为这将有助于继承父类的方法和属性。永远记住，构造函数内的 this 指向创建的自定义元素。
这是我们组件外观的简单概述。
class CodingDudeGravatar extends HTMLElement {
constructor() {
super()
this.addEventListener('click', e => {
alert('You Clicked Me!')
});
this.innerText="Hello There!"
}
}
window.customElements.define('codingdude-gravatar', CodingDudeGravatar);
在开始向自定义标记添加标记之前，您需要了解与自定义标记关联的生命周期方法。有四个生命周期回调。
| 回调 | 目的 |
|---|---|
构造函数 |
创建自定义标签元素的实例 |
connectedCallback |
自定义标签元素的实例被插入到文档中 |
disconnectedCallback |
自定义标签元素的实例从文档中删除 |
attributeChangedCallback(attributeName, oldValue, newValue) |
添加、删除或更新了自定义标记元素中的属性 |
带有这些回调的自定义标记的骨架如下所示：
class CodingDudeGravatar extends HTMLElement {
constructor() {
super(); // always call super() first in the constructor.
...
}
connectedCallback() {
...
}
disconnectedCallback() {
...
}
attributeChangedCallback(attrName, oldVal, newVal) {
...
}
}
我们已经了解了如何在自定义元素中使用 构造函数 。现在，让我们在代码中使用其他回调方法！让我们从 connectedCallback 开始。
connectedCallbackconnectedCallback 可用于检查自定义标记中的电子邮件属性。一旦元素添加到文档中，就会进行此检查。我们将使用 getter 函数来检查 custom tag 是否具有 email 属性。
class CodingDudeGravatar extends HTMLElement {
get email() {
return this.hasAttribute('email');
}
constructor() {
super()
this.addEventListener('click', e => {
alert('You Clicked Me!')
});
this.innerText="Hello There!"
}
connectedCallback(){
if(this.email){
var email = this.attributes.email.value;
var gravatar = "https://www.gravatar.com/avatar"
this.innerHTML = "<img src='"+gravatar+"'></br>"+email
}
else
{
this.innerHTML = "No Email";
}
}
}
当自定义标记插入 HTML 中时，您将看到如下内容：
<codingdude-gravatar></codingdude-gravatar>
但是，当在自定义标签中设置 email 属性时，屏幕将如下所示：
<codingdude-gravatar email="admin@coding-dude.com"></codingdude-gravatar>
attributeChangedCallback浏览器将为 observedAttributes 数组中列出的所有属性调用生命周期方法 attributeChangedCallback。其背后的目标是提高自定义标签的性能。例如，如果用户决定更改样式，您不希望触发 attributeChangedCallback 。在我们的例子中，我们希望仅当电子邮件更改时才调用 attributeChangedCallback 。为了实现这一点，代码如下所示：
class CodingDudeGravatar extends HTMLElement {
get email() {
return this.hasAttribute('email');
}
constructor() {
super()
this.addEventListener('click', e => {
alert('You Clicked Me!')
});
this.innerText="Hello There!"
}
connectedCallback(){
if(this.email){
var email = this.attributes.email.value;
var gravatar = "http://www.gravatar.com/avatar"
this.innerHTML = "<img src='"+gravatar+"'></br>"+email
}
else
{
this.innerHTML = "No Email";
}
}
static get observedAttributes() {
return ['email'];
}
attributeChangedCallback(name, oldValue, newValue) {
if(name == 'email'){
alert(`The ${name} changed to ${newValue}`)
}
}
}
根据上面的代码，每次我们更改电子邮件时都会看到一条警报。
自定义元素中的回调是同步的。如果在自定义元素上调用 el.setAttribute('email','newemail') ，浏览器将立即触发 attributeChangedCallback() 。
disconnectedCallback生命周期方法列表中的最后一个是 disconnectedCallback。当您从文档中删除元素时，将调用此方法。当您想要清除自定义标签造成的影响时，该方法非常有用。您可以使用 el.remove() 方法轻松删除自定义标签。
但是，您必须非常小心 disconnectedCallback() 的使用方式。如果用户选择关闭选项卡或浏览器，则永远不会触发此回调。
在任何基于 HTML 的应用程序中，开发人员使用反映在 DOM 上的属性是很常见的。例如， hidden 是可用于隐藏元素的属性，例如<div hide></div> 只会隐藏 DOM 中的元素。开发人员自然希望这些属性也适用于自定义标签。
由于我们从 HTMLElement 扩展，因此默认情况下这些属性将出现在自定义元素中。然而，这些属性的行为是可以修改的。大多数时候，JavaScript 类中的 getter 和 setter 用于控制属性。
codingdude-gravatar[hidden] {
opacity: 0.5;
pointer-events: none;
}
...inside the class
{
get hidden() {
return this.hasAttribute('hidden');
}
set hidden(val) {
// Reflect the value of `hidden` as an attribute.
if (val) {
this.setAttribute('hidden', '');
} else {
this.removeAttribute('hidden');
}
}
}
本文中讨论的所有内容都可以在以下演示中进行实验。
这只是自定义元素工作原理的开始。这个领域还有很多东西需要探索和学习。请继续关注此空间，了解有关自定义元素及其高级概念的更多帖子。
위 내용은 HTML 기능을 확장하기 위한 사용자 정의 태그 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
