YouTube中yt、ytd、ytd-app类HTML标签是什么？如何创建这类自定义标签？

这些标签是不是自定义标签？ #

是，你在YouTube页面里看到的所有带yt-、ytd-前缀的标签都属于自定义元素（Custom Elements），是W3C Web Components标准的核心特性之一，作用是把可复用的UI和逻辑封装成独立的HTML标签，和原生的<div>、<p>这类标签用法完全一致，区别只是这些标签是业务方自己定义的。
按照规范要求，自定义元素的标签名必须包含短横线-，就是为了和原生HTML标签做区分，避免命名冲突。

如何创建这类自定义标签？ #

创建原生自定义标签只需要两个核心步骤：

1. 定义一个继承自HTMLElement的类，在类里实现组件的初始化、属性监听、生命周期逻辑
2. 用customElements.define()方法把自定义标签名和你写的类绑定注册

基础示例代码 #

// 定义组件类
class YtdThumbnail extends HTMLElement {
  constructor() {
    super();
    // 开启Shadow DOM隔离样式和DOM结构
    const shadowRoot = this.attachShadow({ mode: "open" });

    // 组件内部的DOM结构
    const coverImg = document.createElement("img");
    coverImg.style.width = "100%";
    coverImg.style.borderRadius = "8px";
    coverImg.src = this.getAttribute("cover") || "";
    coverImg.alt = this.getAttribute("title") || "";

    shadowRoot.appendChild(coverImg);
  }
}

// 注册组件，绑定标签名
customElements.define("ytd-thumbnail", YtdThumbnail);

注册完成后就可以直接在HTML里像原生标签一样使用：

<ytd-thumbnail cover="xxx.jpg" title="测试视频封面"></ytd-thumbnail>

如果是做复杂的业务项目，也可以直接用Lit、Polymer这类封装好的自定义元素开发框架，不用手动处理属性同步、DOM更新这类底层逻辑，开发效率更高。

内容的提问来源于stack exchange，提问作者Vigneshwaran Chandrasekaran