Eigene HTML mit Web-Komponenten rollen
Kommen Sie zu Raymond Camden, Sr. Developer Evangelist bei Adobe, um die Grundlagen von Web-Komponenten zu lernen, einschließlich benutzerdefinierter Elemente, Shadow DOM und HTML-Vorlagen. Erkunden Sie reale Beispiele wie das Einbetten von PDF und das Erstellen sortierbarer Tabellen, um Ihre Anwendungen mit wiederverwendbaren, modernen Lösungen zu verbessern.
Community-Diskussion
Setzen Sie das Gespräch in der Adobe Developers Live-Community Diskussion fort.
Wichtige Schlussfolgerungen
- Einführung in Web-Komponenten Web-Komponenten ermöglichen es Entwickelnden, benutzerdefinierte HTML-Elemente mit ihrem eigenen Aussehen und Interaktivität zu erstellen, die mit JavaScript definiert werden.
- Kerntechnologien Webkomponenten werden mithilfe von drei Kerntechnologien erstellt** benutzerdefinierten Elementen, Schatten-DOM und HTML-Vorlagen.
- Benutzerdefinierte Elemente Benutzerdefinierte Elemente ermöglichen die Erstellung neuer HTML-Tags. Sie müssen einen Kebab-Fall verwenden und einen Bindestrich enthalten. JavaScript-Klassen werden verwendet, um ihr Verhalten zu definieren.
- Shadow DOM Das Shadow DOM bietet Kapselung für die DOM-Baumstruktur einer Komponente, verhindert CSS-Lecks und ermöglicht eine besser kontrollierte Formatierung.
- HTML-Vorlagen HTML-Vorlagen ermöglichen die Definition von HTML und CSS, die geklont und an das DOM angehängt werden können. Der Moderator bevorzugt jedoch die Verwendung von Slots gegenüber Vorlagen, um eine bessere Verteilung und Flexibilität zu erzielen.
- Attribute und Ereignisse Benutzerdefinierte Elemente können über Attribute und Ereignishandler verfügen, z. B. connectecallback und disconnectecallback, um ihr Verhalten beim Hinzufügen oder Entfernen aus dem DOM zu verwalten.
- Slots Slots ermöglichen das Einfügen von Inhalten in Web-Komponenten und unterstützen sowohl standardmäßige als auch benannte Slots für ein flexibleres Content-Management.
- Beispiele aus der Praxis Beispiele sind ein PDF-Einbettungs-Viewer, Bildplatzhalter und ein Tabellensortierer, die praktische Anwendungen von Web-Komponenten zeigen.
- Progressive Enhancement Web-Komponenten können das vorhandene HTML verbessern, ohne die Funktionalität zu beeinträchtigen, wenn JavaScript nicht geladen werden kann.
- Nächste Schritte und Ressourcen In der Präsentation wird vorgeschlagen, die Formularbeteiligung, das deklarative Shadow-DOM, benutzerdefinierte HTML-Attribute und das Server-seitige Rendering zu untersuchen. Zu den Ressourcen gehören MDN, webcomponents.org und das Buch „Web Components in Action“ von Ben Farrell.
recommendation-more-help
3c5a5de1-aef4-4536-8764-ec20371a5186