Links zu Web Components

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

  • Wie wir Web Components bei GitHub verwenden — Kristján Oddsson spricht darüber, wie GitHub Web Components einsetzt. Ich erinnere mich, dass sie sehr frühe Anwender waren, und hier steht, dass sie 2014 eine <relative-time> Komponente veröffentlicht haben! Jetzt haben sie eine ganze Reihe von Open-Source-Komponenten. So einfach zu verwenden! Großartig! Ich wollte mir ihren HTML-Code ansehen und sie in Aktion erleben, also habe ich die Quelltextansicht geöffnet und den RegEx (<\w+-[\w|-|]+.*>) (danke, Andrew) verwendet, um danach zu suchen. Sieben auf der eingeloggten Startseite, also blasen sie keinen Rauch.
  • Verwendung von Web Components zur Kapselung von CSS und zur Lösung von Designsystem-Konflikten — Tyler Williams sagt, dass die Kapselung (Shadow DOM) von Web Components die Vermeidung von Styling-Konflikten mit einem älteren CSS-System bedeutete. Er beweist auch, dass Unternehmen, die Websites für Git-Repositories erstellen, Web Components lieben.
  • Container Queries in Web Components — Max Böck teilt mit, dass der :host einer Web Component die @container sein kann, was extrem großartig ist und absolut die Art und Weise, wie alle Web Components geschrieben werden sollten.
  • Schnellere Integration mit Web Components — Jason Grigsby erledigt Kundenarbeit und sagt, dass Web Components die Integration nicht schnell oder einfach machen, sondern die Integration schnell und einfach machen.
  • FicusJS — Ich erinnere mich, dass mir einmal gesagt wurde, dass native Web Components nicht wirklich dafür gedacht waren, "roh" verwendet zu werden, sondern auf niedriger Ebene, sodass darauf Werkzeuge aufgebaut werden könnten. Das sehen wir im Wettbewerb zwischen Renderern, wie lit-html vs htm. Dann, in Schichten von Werkzeugen darüber, wie Ficus hier, das eine Menge schicker Sachen wie Zustand, Methoden und Ereignisse hinzufügt.
  • Shadow DOM und seine Auswirkung auf die inoffizielle Styling-API — Jim Nielsen erweitert die Idee, die ich bei ShopTalk angeschnitten habe, dass das DOM die Styling-API ist. Es ist gewissermaßen selbstdokumentierend. „Als Autor müssen Sie Zeit und Mühe darauf verwenden, über eine Styling-API für Ihre Komponente nachzudenken, sie zu entwerfen und dann zu dokumentieren. Und als Verbraucher müssen Sie diese API lesen, verstehen und implementieren.“ Ja. Deshalb erscheint es mir eine gute Idee zu sein, eine Option zu haben, um "auf unkomplizierte Weise in das Shadow DOM von außerhalb von CSS hineinzugreifen".
  • Awesome Standalones — Ich denke, Davids Liste hier ist genau das, was Entwickler zum Einstieg bewegt und sie dazu bringt, Web Components als tatsächlich nützlich zu betrachten.

Vor zwei Jahren, stimmt immer noch