Komponenten sind die Bausteine moderner Webanwendungen. Welche Best Practices sollten Sie befolgen, wenn Sie Ihre eigenen Komponenten erstellen, damit diese auch die Zeit überdauern?
Komponenten sind die Bausteine moderner Webanwendungen. Welche Best Practices sollten Sie beim Erstellen Ihrer eigenen Komponenten befolgen, damit diese auch die Zeit überdauern?
Benutzerdefinierte Elemente
Mit benutzerdefinierten Elementen haben Entwickler die Möglichkeit, HTML zu erweitern und eigene Tags zu erstellen. Da benutzerdefinierte Elemente auf Standards basieren, profitieren sie vom integrierten Komponentenmodell des Webs. Das Ergebnis ist modularerer Code, der in vielen verschiedenen Kontexten wiederverwendet werden kann.
Weitere Informationen
Schatten-DOM
Shadow DOM ist ein Webstandard, der Komponentenstil und Markup-Kapselung bietet. Sie ist ein von entscheidender Bedeutung im Zusammenhang mit Webkomponenten, da sie dafür sorgt, dass eine Komponente in jeder Umgebung funktioniert, selbst wenn andere CSS- oder JavaScript-Elemente auf der Seite vorhanden sind.
Weitere Informationen
Best Practices
Da es sich bei benutzerdefinierten Elementen und Shadow DOM um einfache Primitive handelt, ist nicht immer klar, wie sie am besten kombiniert werden können, um eine Komponente zu erstellen, die robust ist und in vielen verschiedenen Umgebungen gut funktioniert. Mit diesen APIs können Sie wirklich praktisch alles machen. Hier sind einige Best Practices, mit denen Sie dafür sorgen können, dass Ihre Komponenten überall einwandfrei funktionieren.
Weitere Informationen
Beispiele
HowTo-Komponenten sind eine Reihe von Elementen, die Best Practices für benutzerdefinierte Elemente und Shadow DOM darstellen. Diese Elemente sind nicht für die Verwendung in der Produktion gedacht, sondern sollen als Lehrhilfe dienen, um Best-Practice-Vorschläge auf tatsächliche Implementierungen abzugleichen.
Weitere Informationen
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2017-08-14 (UTC)."],[],[]]