Erweitern Sie HTML durch Erstellen benutzerdefinierter Tags

In diesem Tutorial werde ich Ihnen zeigen, wie einfach es ist, die HTML -Sprache mit benutzerdefinierten Tags zu erweitern. Die benutzerdefinierten Tags können verwendet werden, um verschiedene Verhaltensweisen zu implementieren. Sie sind daher eine sehr bequeme Möglichkeit, weniger Code zu schreiben und Ihre HTML -Dokumente einfacher zu halten. & lt; codingDude-gravatar & gt;

. In diesem benutzerdefinierten Tag werden das Gravatar -Bild für eine bestimmte E -Mail -Adresse angezeigt. 

Das Fenster.Customelements.Define ()

.

Das erste Argument in & lt; codingDudeGravatar & gt; sind

ungültig

. Dies ermöglicht dem Parser sollte in der Lage sein, ein reguläres Element von einem benutzerdefinierten Tag zu unterscheiden.  benutzerdefinierte Element-Tag-Namen müssen immer einen Dash (-) haben (). Das obige Code-Stück entspricht Folgendes:

Wenn Sie ein benutzerdefiniertes Element erstellen möchten, das ein anderes HTML-Element erweitert, muss das native Element in domexception

benutzerdefinierte Element-Tags nicht selbstkläglich sein.

4. Instantiating des benutzerdefinierten Elements

Alle Standardregeln von HTML -Elementen gelten für benutzerdefinierte Elemente. Genau wie Standardelemente können Sie mit JavaScript ein benutzerdefiniertes Element im DOM erstellen oder in html deklarieren. in DOM mit JavaScript:

customElements.define("codingdude-gravatar", CodingDudeGravatar);<br>

5. Das Hinzufügen von Markup zum benutzerdefinierten Tag

Das Hinzufügen von Markup ist in einem benutzerdefinierten Tag ziemlich einfach. Zunächst müssen Sie eine Klasse erstellen, die ein übergeordnetes HTML -Element erweitert. In unserem Fall werden wir Htmlelement

erweitern. Denken Sie daran, dies innerhalb der Konstruktorpunkte auf das benutzerdefinierte Element zu nennen, das erstellt wird. Lebenszyklusmethoden

Bevor Sie dem benutzerdefinierten Tag Markup hinzufügen, müssen Sie sich über die mit benutzerdefinierten Tags verbundenen Lebenszyklusmethoden bewusst sein. Es gibt vier Lebenszyklus -Rückrufe. Sobald das Element dem Dokument hinzugefügt wird, findet dieser Scheck statt. Wir würden ein benutzerdefiniertes Tag

verwenden, das das E -Mail -Attribut im benutzerdefinierten Tag festgelegt hat. Der Bildschirm wäre wie folgt:

customElements.define("codingdude-gravatar", CodingDudeGravatar);<br>

AttributChangedCallback für alle in der AttributechangedCallback aufgeführten Attribute zu abgefeuert. In our case, we would want the el.setAttribute('email','newemail') on the custom element, the browser will trigger disconnectedCallback

Last in our list of lifecycle methods would be the el.remove() method.

However, you must be very careful about how hidden is a property that can be used ein Element zu verbergen, z. In Htmlelement sind diese Eigenschaften standardmäßig im benutzerdefinierten Element vorhanden. Das Verhalten dieser Eigenschaften kann jedoch geändert werden. Meistens werden die Getter und Setter in JavaScript -Klassen verwendet, um die Eigenschaften zu steuern. 

<codingdude-gravatar></codingdude-gravatar><br>

Demo

Alles, was in diesem Beitrag diskutiert wird, kann in der folgenden Demo experimentiert werden.

Hurra! Wir sind am Ende unseres Beitrags zum Erstellen von benutzerdefinierten Elementen gekommen. Jetzt sollten Sie in der Lage sein, ein benutzerdefiniertes Element zu erstellen und es in Ihrem HTML -Markup zu verwenden. Probieren Sie es aus! Sie werden erstaunt sein, wie viel erreicht werden kann. In diesem Bereich gibt es so viel mehr zu erkunden und zu lernen. Beobachten Sie diesen Raum weiter, um weitere Beiträge zu benutzerdefinierten Elementen und ihren fortgeschrittenen Konzepten zu erhalten.

Das obige ist der detaillierte Inhalt vonErweitern Sie HTML durch Erstellen benutzerdefinierter Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!