vscode 扩展 本地_如何扩展本地html元素

vscode 扩展 本地

When standard HTML is not enough

如果标准HTML不够用

Ever since the days of XML we have tried to extend HTML with our own tags.

从XML时代开始，我们就尝试使用我们自己的标签扩展HTML。

The standard library of HTML tags is fairly limited and intentionally consists of low-level building blocks, meant to be composed by developers into more high-level functionality.

HTML标签的标准库是相当有限的，有意地由低级构建块组成，意在由开发人员组成更高级的功能。

Now that all modern browsers support Web Components (or more specifically Custom Elements) you can create your very own HTML elements that you can use anywhere by just loading a script and adding the tag to the document.

现在，所有现代浏览器都支持Web组件 (或更具体地讲，是Custom Elements )，您可以创建自己HTML元素，只需加载脚本并将标签添加到文档中，即可在任何地方使用。

It’s really as simple as that.

就这么简单。

If you have created your own image gallery, you can use it by just loading the script and adding <image-gallery></image-gallery> to the document:

如果您创建了自己的图片库，则可以通过加载脚本并将<image-gallery></image-gallery>到文档中来使用它：

class ImageGallery extends HTMLElement {
       
  constructor() {
       
    super();
  }  ...}customElements.define('image-gallery', ImageGallery);<image-gallery></image-gallery>  // presto!

Here the ImageGallery class contains all the functionality for the <image-gallery> HTML element and we register it throughcustomElements.define with the 'image-gallery' tag name.

这里的ImageGallery类包含<image-gallery> HTML元素的所有功能，我们通过customElements.define使用'image-gallery'标签名对其进行注册。

Now frameworks like React, Angular and Vue.js also allow you to create your own HTML tags, but contrary to framework components, Custom Elements are real first-class HTML elements.

现在，像React，Angular和Vue.js这样的框架也允许您创建自己HTML标签，但是与框架组件相反，自定义元素是真正的一流HTML元素。

In this case the ImageGallery class extends HTMLElement, which is the base interface of all HTML elements. This means that it will inherit all the functionality that is common to all HTML elements.

在这种情况下， ImageGallery类扩展了HTMLElement ， HTMLElement是所有HTML元素的基本接口。 这意味着它将继承所有HTML元素共有的所有功能。

For example, you can attach event listeners to it through addEventListener, use CSS to style it through its style property or interact with it in the browser devtools like any other HTML element.

例如，您可以通过addEventListener将事件侦听器附加到该事件侦听器，使用CSS通过其style属性设置其style或在浏览器devtool中与其他HTML元素进行交互。

And it doesn’t stop there.

而且不止于此。