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.
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
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
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
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.
Different examples are mentioned below:
<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:
<html>
<head>
<script>
customElements.define('user-information', class extends HTMLElement {
connectedCallback() {
alert(this.innerHTML);
}
});
</script>
</head>
</html>
<user-information>Sivaraman</user-information>Output:
<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.
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!
