自定义 Html 元素

以下文章提供了自定义 Html 元素的概述。在html中，我们有很多Web组件的功能；有些具有创建用户定义或自定义 html 元素的标准能力。它以 html 语言封装了网页以提供更多功能。使用一组嵌套的批处理元素需要很长时间，这些元素可以与更多自定义网页功能相结合。一些网络浏览器支持自定义元素，例如 Mozilla、firefox、google chrome 和 Microsoft Edge 浏览器；它们支持 html 自定义元素、safari 和 opera；这些浏览器与 html 自定义元素不兼容；它仅支持自主的用户定义元素。

语法：

我们将使用 javascript 来定义新的 html 元素，就像自定义元素一样，因为它是一个全球化的元素，用于在 html 中引入新标签。因此，当我们使用网页元素时，语法会有所不同。

Class sample extends HtmlElement
{
default constructor()
{
---some user defined codes---
}
}

以上代码是基于java的示例代码；这是创建自定义元素的大纲，更改会受到网页的影响。

在哪里使用自定义 Html 元素？

一般html自定义元素包含两种类型：自主自定义元素和自定义内置元素。 每当我们在 HTML 中创建自定义元素时，它都会描述类及其方法、属性和属性；有些事件也被称为这样。一旦创建了自定义元素，并将其定义为内置的 html 元素，例如 、 等元素。然后，我们就可以在 html 语言中使用我们的自定义元素。

自治自定义元素包含所有新元素以及使用 HtmlElement 类扩展的用户定义元素；它将附带java标准规则。此外，Customizedbuilt-inElements会创建内置元素，在自治自定义元素中创建自定义元素；每当从网页中添加或删除元素时，我们都会告诉浏览器如何显示它。

自主自定义元素使用具有特殊方法的类来实现上述场景。例如，一些方法是“connectedCallback()”，每当将元素添加到文档时，该方法将用于浏览器调用。此外，如果在 html 文档中重复添加或删除该元素，则可以多次调用它。”每当从文档中删除元素时，此方法都会调用浏览器；disconnectedCallback()”也可以多次调用它来在html文档中重复添加或删除元素。

observedAttributes() 是返回属性名称数组以监视反射的更改的方法之一。attributeChangedCallback(name,oldvalue,newvalue) 方法在将列出并修改任何一个属性时调用，并且“每当元素移动到 html 文档中的新元素时，就会调用“adoptedCallback()”。现在，假设我们使用任何 html 元素。在这种情况下，它们有自己的标签，例如，。标签，我们将创建 的实例标签具有使用 javascript 的 MyElement 我们已经创建了实例，使用该实例，我们将使用上面提到的方法调用所需的方法，我们将使用 javascript 在网页中使用它们的功能。

假设我们在 html 中使用一些默认标签（例如 time>）来计算日期和时间是时间的标签元素。不过，当时它并没有自动设置任何时间格式；我们将使用connectedCallback()这样的方法；此方法将通过调用 来使用浏览器。选项，并且该元素也添加到页面中，或者 html 解析器将帮助检测它使用内置的 Intl.DateTimeFormat 选项，dateFormatter 将支持整个浏览器，这有助于以时间格式很好地显示。我们还在customElements.define中声明了新的html元素（标签名称，类名称）；这种格式有助于在脚本中创建自定义元素。

创建自定义元素后还需要升级整个格式，例如我们PC上的时间更新，但它会在脚本中未使用customElements.define方法中的html元素之前更新，因为这不是错误；该元素显示为未知，就像我们所说的非标准 html 标签一样；之后，它将在 css 样式选择器中使用，例如 :not(:define) 在调用 customElements.define 方法之后，它将在它将支持的时间格式选项中升级新实例connectCallback() 方法也被调用，然后它们变成：定义的状态，就像称为 customElements.get(name)、customElements.whenDefined(name) 的方法一样，这两个方法都返回名称作为参数。

Examples of Custom Html Element

Different examples are mentioned below:

Example #1

<script>
class sample extends HTMLElement { // (1)
connectedCallback() {
let d = new Date(this.getAttribute('datetime') || Date.now());
this.innerHTML = new Intl.DateTimeFormat("default", {
month: this.getAttribute('month') || undefined,
day: this.getAttribute('day') || undefined,
year: this.getAttribute('year') || undefined,
minute: this.getAttribute('minute') || undefined,
hour: this.getAttribute('hour') || undefined,
timeZoneName: this.getAttribute('time-zone-name') || undefined,
second: this.getAttribute('second') || undefined,
}).format(d);
}
}
customElements.define("time-formatted", sample);
</script>

<time-formatted datetime="2020-02-19" year="numeric" month="long" day="numeric" hour="numeric" minute="numeric" second="numeric" time-zone-name="long">
</time-formatted>

Output:

Example #2

<script>
customElements.define('user-information', class extends HTMLElement {
connectedCallback() {
alert(this.innerHTML);
}
});
</script>


<user-information>Sivaraman</user-information>

Output:

Example #3

<script>
class Example extends HTMLButtonElement {
constructor() {
super();
this.addEventListener('click', () => alert("User!"));
}
}
customElements.define('sample-button', Example, {extends: 'button'});
</script>
<button is="sample-button">Welcome</button>
<button is="sample-button" disabled>Disabled</button>

Output:

The above three examples will discuss the custom elements in the html languages; In the first example, we already know about the time and date format output using custom tag elements; the second example shows a basic javascript function called after executing the custom elements in the html and final example will be discussed about the same javascript function while we are clicking the html custom tag elements.

Conclusion

The Web components have some processes for connecting with the technologies. It will be used to help the html for reusable purposes across the entire web.Html have the Dom components; it will be used for communicating the user-level data(including custom elements) through the web for data migration.

以上是自定义 Html 元素的详细内容。更多信息请关注PHP中文网其他相关文章！