Benutzerdefiniertes HTML-Element

Der folgende Artikel enthält eine Übersicht über das benutzerdefinierte HTML-Element. In HTML gibt es viele Funktionen für die Webkomponenten; Einige verfügen standardmäßig über die Möglichkeit, benutzerdefinierte oder benutzerdefinierte HTML-Elemente zu erstellen. Es kapselt die Webseiten für mehr Funktionalität in der HTML-Sprache. Bei einem verschachtelten Satz von Batch-Elementen, die mit weiteren benutzerdefinierten Webseitenfunktionen kombiniert werden können, dauert es lange. Einige Webbrowser unterstützen benutzerdefinierte Elemente wie Mozilla-, Firefox-, Google Chrome- und Microsoft Edge-Browser. Sie werden für die benutzerdefinierten HTML-Elemente Safari und Opera unterstützt. Diese Browser sind nicht mit den benutzerdefinierten HTML-Elementen kompatibel. Es unterstützt nur autonome benutzerdefinierte Elemente.

Syntax:

Wir werden Javascript verwenden, um das neue HTML-Element wie benutzerdefinierte Elemente zu definieren, da es sich um ein globalisiertes Element zur Einführung des neuen Tags in HTML handelt. Daher unterscheidet sich die Syntax, wenn wir unsere Webseitenelemente verwenden.

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

Der obige Code ist ein Java-basierter Beispielcode. Es handelt sich um die allgemeine Gliederung zum Erstellen der benutzerdefinierten Elemente. Änderungen werden von der Webseite beeinflusst.

Wo kann das benutzerdefinierte HTML-Element verwendet werden?

Im Allgemeinen enthalten die benutzerdefinierten HTML-Elemente zwei Arten autonome benutzerdefinierte Elemente und benutzerdefinierte integrierte Elemente. Immer wenn wir die benutzerdefinierten Elemente in HTML erstellen, beschreibt es die Klasse und ihre Methoden, Attribute und Eigenschaften; Manche Veranstaltungen werden auch so genannt. Sobald die benutzerdefinierten Elemente erstellt und als integrierte HTML-Elemente definiert sind, können einige Elemente wie , usw. dann verwendet werden. Dann können wir unsere benutzerdefinierten Elemente in der HTML-Sprache verwenden.

Autonomous Custom Elements enthält alle neuen Elemente, wobei die benutzerdefinierten Elemente mit der HtmlElement-Klasse erweitert werden. Es wird mit den Java-Standardregeln geliefert. Darüber hinaus erstellen benutzerdefinierte integrierte Elemente integrierte Elemente, um ein benutzerdefiniertes Element in autonomen benutzerdefinierten Elementen zu erstellen. Wir teilen den Browsern mit, wie sie es anzeigen, wenn das Element den Webseiten hinzugefügt oder daraus entfernt wird.

Die autonomen benutzerdefinierten Elemente erstellen die oben genannten Szenarien mithilfe von Klassen mit speziellen Methoden. Einige Methoden sind beispielsweise „connectedCallback()“. Diese Methode wird für Browseraufrufe verwendet, wenn das Element zu den Dokumenten hinzugefügt wird. Außerdem kann es viele Male aufgerufen werden, wenn das Element wiederholt in den HTML-Dokumenten hinzugefügt oder entfernt wird.“ „disconnectedCallback()“: Diese Methode ruft den Browser immer dann auf, wenn das Element aus den Dokumenten entfernt wird. Es kann auch mehrmals aufgerufen werden, wenn das Element wiederholt in den HTML-Dokumenten hinzugefügt oder entfernt werden soll.

observedAttributes() ist eine der Methoden zum Zurückgeben von Arrays von Attributnamen, um die reflektierten Änderungen zu überwachen. Die Methode attributeChangedCallback(name,oldvalue,newvalue) ruft auf, wenn eines der Attribute aufgelistet wird und geändert werden soll, und „ adoptCallback()“ wird immer dann aufgerufen, wenn das Element in ein neues Element in HTML-Dokumenten verschoben wird. Nehmen wir nun an, wir verwenden beliebige HTML-Elemente. In diesem Fall haben sie ihre Tags, zum Beispiel Tag erstellen wir die Instanz des Tag hat MyElement unter Verwendung von Javascript. Wir haben die Instanz erstellt. Mithilfe dieser Instanz rufen wir die erforderlichen Methoden mit den oben genannten Methoden auf. Wir werden ihre Funktionalitäten in den Webseiten mithilfe von Javascript verwenden.

Angenommen, wir verwenden die Datums- und Uhrzeitberechnung in HTML unter Verwendung einiger Standard-Tags wie „time>“ ist das Tag-Element für die Zeit. Dennoch gibt es für diese Zeit kein automatisches Zeitformat; Wir werden die Methode wie connectedCallback(); verwenden. Diese Methode nutzt die Browser, indem sie sie für aufruft. Optionen, und auch das Element wird der Seite hinzugefügt, oder der HTML-Parser hilft bei der Erkennung, es verwendet die integrierten Optionen für Intl.DateTimeFormat in dateFormatter und unterstützt alle Browser, was dazu beiträgt, dass es gut im Zeitformat angezeigt wird. Wir deklarieren auch die neuen HTML-Elemente in customElements.define (Tag-Name, Klassenname); Dieses Format hilft beim Erstellen der benutzerdefinierten Elemente in den Skripten.

Nach dem Erstellen der benutzerdefinierten Elemente ist es auch notwendig, das gesamte Format wie die Zeitaktualisierung auf unserem PC zu aktualisieren, aber es wird aktualisiert, bevor die HTML-Elemente in der Methode „customElements.define“ nicht in den Skripten verwendet werden, da es sich nicht um einen Fehler handelt; Das Element wird für unbekannt angezeigt, genau wie wir es als nicht standardmäßige HTML-Tags sagen. Danach werden in den CSS-Stilselektoren :not(:defined) verwendet. Danach wird die Methode „customElements.define“ aufgerufen und die neue Instanz wird in den Zeitformatoptionen aktualisiert, die sie unterstützt Wird auch die Methode connectedCallback() aufgerufen, dann werden sie: definierter Status wie die Methoden mit den Namen customElements.get(name),customElements.whenDefined(name). Beide Methoden geben den Namen als Argumente zurück.

Examples of Custom Html Element

Different examples are mentioned below:

Example #1

<html>
<head>
<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>
</head>
<time-formatted datetime="2020-02-19"
year="numeric" month="long" day="numeric"
hour="numeric" minute="numeric" second="numeric"
time-zone-name="long">
</time-formatted>
</html>

Output:

Example #2

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

Output:

Example #3

<html>
<head>
<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>
</head>
</html>

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.

Das obige ist der detaillierte Inhalt vonBenutzerdefiniertes HTML-Element. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!