In meinem letzten Artikel haben wir gesehen, dass Web-Komponenten nicht so beängstigend sind, wie sie scheinen. Wir haben uns eine super einfache Einrichtung angesehen und ein Profil für einen Zombie-Dating-Service erstellt, komplett mit einem benutzerdefinierten <zombie-profile> Element. Wir haben das Element für jedes Profil wiederverwendet und jedes mit einzigartigen Informationen über das <slot> Element gefüllt.
So ist alles zustande gekommen.
Das war cool und hat viel Spaß gemacht (naja, ich hatte Spaß jedenfalls…), aber was wäre, wenn wir diese Idee einen Schritt weiter treiben und sie interaktiv machen? Unsere Zombie-Profile sind großartig, aber damit dies eine nützliche postapokalyptische Dating-Erfahrung ist, würdest du, weißt du, einen Zombie „liken“ oder ihm sogar eine Nachricht senden wollen. Das werden wir in diesem Artikel tun. Swipen lassen wir für einen anderen Artikel. (Wäre nach links wischen das Richtige für Zombies?)
Artikelreihe
- Web Components sind einfacher als man denkt
- Interaktive Web Components sind einfacher als man denkt
(Du bist hier) - Die Verwendung von Web Components in WordPress ist einfacher als man denkt
- Standard-Elemente mit Web Components aufpeppen „ist“ einfacher als man denkt
- Kontextsensitive Web Components sind einfacher als man denkt
- Web Component Pseudo-Klassen und Pseudo-Elemente sind einfacher als man denkt
Dieser Artikel setzt Grundkenntnisse über Web-Komponenten voraus. Wenn du neu in diesem Konzept bist, ist das völlig in Ordnung – der vorherige Artikel sollte dir alles geben, was du brauchst. Nur zu. Lies ihn. Ich warte. *Daumen drehen* Bereit? Okay.
Zuerst ein Update der Originalversion
Lassen Sie uns eine Sekunde (okay, vielleicht länger) innehalten und das ::slotted()-Pseudo-Element betrachten. Es wurde mir nach dem letzten Artikel (danke, Rose!) zugetragen und löst einige (aber nicht alle) der von mir aufgetretenen Kapselungsprobleme. Wenn Sie sich erinnern, hatten wir einige CSS-Stile außerhalb der -Komponente und einige innerhalb eines