自訂 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 在網頁中使用它們的功能。

假設我們在 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中文網其他相關文章！