Rulla din egen HTML med webbkomponenter
Gå med i Raymond Camden, Sr. Developer Evangelist på Adobe och lär dig grunderna i Web Components, som skräddarsydda element, skugg-DOM och HTML. Utforska exempel från verkligheten som att bädda in PDF och skapa sorterbara tabeller för att förbättra programmen med återanvändbara, moderna lösningar.
Community-diskussion
Fortsätt konversationen i diskussionen i Adobe Developers Live Community.
Viktiga uppgifter
- Introduktion till webbkomponenter Med webbkomponenter kan utvecklare skapa anpassade HTML-element med sin egen look och interaktivitet, som definieras med JavaScript.
- Kärnteknologier Webbkomponenter byggs med hjälp av tre huvudtekniker**, anpassade element, skugg-DOM och mallar för HTML.
- Anpassade element gör det möjligt att skapa nya HTML-taggar. De måste använda"kebabcase" och innehålla ett bindestreck. JavaScript-klasser används för att definiera deras beteende.
- Skugga-DOM Skugg-DOM tillhandahåller inkapsling för DOM-trädet i en komponent, vilket förhindrar CSS-läckage och möjliggör mer kontrollerad formatering.
- HTML-mallar HTML-mallar tillåter definition av HTML och CSS som kan klonas och läggas till i DOM. Presentatören föredrar dock att använda kortplatser framför mallar för bättre distribution och flexibilitet.
- Attribut och händelser Anpassade element kan ha attribut och händelsehanterare, till exempel connectedCallback och disconnectedCallback, för att hantera deras beteende när de läggs till eller tas bort från DOM.
- Platser Med platser kan innehåll infogas i webbkomponenter, vilket stöder både standard- och namngivna platser för mer flexibel innehållshantering.
- Exempel från verkligheten är bland annat ett visningsprogram för inbäddning i PDF, platshållare för bilder och en tabellsortering som visar praktiska program för webbkomponenter.
- Progressiv förbättring Webbkomponenter kan förbättra befintliga HTML utan att knäcka funktioner om JavaScript inte läses in.
- Nästa steg och resurser Presentationen föreslår att du utforskar formulärdeltagande, deklarativ skugg-DOM, anpassade HTML-attribut och serversidesåtergivning. Bland resurserna finns MDN, webcomponents.org och boken "Web Components in action" av Ben Farrell.
recommendation-more-help
3c5a5de1-aef4-4536-8764-ec20371a5186