Ist eine Headless-Komponente einfach eine nicht gestylte Komponente, oder steckt da noch mehr dahinter?

Das Web trennt Stil bereits vom Inhalt, indem es die Definition von Stilen erfordert
in CSS statt HTML. Diese Architektur ermöglicht es jeder Webseite, ein globales
zu übernehmen. Designstandard, ohne seitenspezifische Stile zu definieren.

Als sich das Web zu einer Anwendungsplattform entwickelte, suchten Entwickler nach Möglichkeiten,
ihre wachsenden Codebasen sind wartbarer. Heutzutage ist die De-facto-Strategie für
Beim Organisieren von Anwendungscode geht es darum, kleine, leichte Komponenten zu definieren, die
zusammen komponiert werden. Somit wurde die Komponente zur Kompositionseinheit in
moderne Webentwicklung.

Komponenten definieren oft sowohl ihr HTML als auch ihr CSS im Interesse der Kapselung.
Dadurch sind sie zwar einfacher zu verfassen, es kann jedoch schwieriger sein, sie zu
schlüssig in ein bestehendes Designsystem integrieren. Dies gilt insbesondere
für Komponenten von Drittanbietern, die von externen Anbietern importiert werden.

Headless Components lösen diese Herausforderung durch die Wiedereinführung einer Trennung zwischen
Inhalt und Stil. Jetzt erfolgt die Trennung jedoch entlang der Komponentengrenze als
im Gegensatz zwischen HTML und CSS. Sie sind der Schlüssel zur Erstellung einer großartigen Headless-Komponente
liegt darin, die Schnittstelle der Komponente so zu gestalten, dass ein Entwickler
ihre eigenen Stile klar und einfach anwenden.

Leiten Sie relevante Requisiten weiter

Im einfachsten Sinne ist eine Headless-Komponente einfach eine nicht gestylte Komponente.
Entwickler müssen in der Lage sein, ihr eigenes CSS auf die HTML-Elemente anzuwenden, die die
Komponente definiert.

Bei einfachen Komponenten kann dies einfach eine Frage der Weiterleitung des Klassennamens sein
prop zum Stammelement, damit Entwickler Klassenselektoren in ihrem
verwenden können CSS.

Wenn Ihre Komponente die gleiche Semantik wie ein natives HTML-Element hat, können Sie
verwenden den ComponentProps-Typ von React, um sicherzustellen, dass alle relevanten Requisiten
weiterleitbar. Denken Sie daran, alle Requisiten wegzulassen, die der Benutzer nicht haben soll
Ihre Komponente, um überschreiben zu können.

import { type ComponentProps } from 'react'

function SubmitButton({ ...props }: Omit, 'type'>) {
  return 
}

Stellen Sie vordefinierte Klassen bereit

Bei Komponenten, die ein oder mehrere untergeordnete Elemente enthalten, werden Entwickler wahrscheinlich
jedes Element einzeln gestalten möchten.

Eine Strategie, dies zu unterstützen, besteht darin, sich auf
zu verlassen. CSS-Kombinatoren.
Beispielsweise könnte eine Headless-Galerie-Komponente wie folgt gestaltet sein:

/* Root container */
.gallery {
}

/* Gallery items container */
.gallery > ul {
}

/* Gallery item */
.gallery > ul > li {
}

/* Next and Previous buttons */
.gallery button {
}

Aber dieser Ansatz stellt ein großes Problem dar, da nun die interne HTML-Struktur von
Die Komponente ist Teil ihrer öffentlichen API. Dadurch wird verhindert, dass Sie das
ändern. Struktur später, ohne möglicherweise Downstream-Code zu beschädigen.

Eine bessere Strategie besteht darin, Klassen für jedes wichtige untergeordnete Element vorzudefinieren. Hier entlang
Entwickler können Klassenselektoren verwenden, ohne von einem bestimmten HTML abhängig zu sein
Struktur:

.xyz-gallery {
}

.xyz-gallery-next-button {
}

.xyz-gallery-previous-button {
}

.xyz-gallery-items-container {
}

.xyz-gallery-item {
}

Denken Sie daran, Ihren Klassen ein Präfix voranzustellen, damit sie nicht mit dem
kollidieren. Eigene Stile des Entwicklers.

Unterstützen Sie benutzerdefinierte Layouts

Die Bereitstellung vordefinierter Klassen ist möglicherweise der schnellste Weg, um Entwicklern
zu ermöglichen. Gestalten Sie Ihre Komponente. Ein Nachteil dieses Ansatzes besteht jedoch darin, dass die
HTML-Struktur kann nicht angepasst werden.

Das spielt möglicherweise keine Rolle. Schließlich ist einfaches HTML bereits recht flexibel in der Art und Weise, wie es
gerendert werden kann. Allerdings greifen Entwickler manchmal nach zusätzlichem HTML, um
um bestimmte Designs zu verwirklichen. Wenn Sie den Quellcode für fast alle
anzeigen Website können Sie mit einer Vielzahl unsemantischer

-Elemente rechnen,
deren einziger Zweck darin besteht, Flex- oder Rasterlayouts zu definieren und untergeordnete Elemente visuell zu gruppieren
Elemente innerhalb eines Rahmens oder erstellen Sie neue Stapelkontexte.

Sie können solche Anwendungsfälle unterstützen, indem Sie Ihre Headless-Komponente in
aufteilen. mehrere verwandte Komponenten. Auf diese Weise können Entwickler ihre eigenen hinzufügen
Layoutelemente zur Komponente hinzufügen. Beispielsweise könnte ein Entwickler die folgenden Elemente einbetten: „Next“ und „
“. Vorherige Schaltflächen aus dem Galeriebeispiel in einem benutzerdefinierten Flexbox-Container:

    {data.map((item) => (
      {item.content}
    ))}
  

    

.gallery-items-container {
}

.gallery-buttons-container {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

Diese Art von Komponenten werden normalerweise mit
implementiert zu übergebender Kontext
Daten untereinander. Sie erfordern mehr Arbeit zum Entwerfen, Implementieren und
dokumentieren. Ihre daraus resultierende Vielseitigkeit bedeutet jedoch oft, dass der zusätzliche Aufwand
es lohnt sich.

Erlauben Sie das Überschreiben von Komponenten

Eine kleine Anzahl von Anwendungsfällen erfordert, dass eine Headless-Komponente das Layout verwaltet
seiner untergeordneten Komponenten. Ein Beispiel könnte eine hierarchische Baumansicht sein, die
ermöglicht die Neuordnung der Artikel per Drag & Drop. Ein weiterer Anwendungsfall könnte sein,
Erlauben Sie Single-Page-Anwendungen, das Standard-Ankerelement durch ein
zu ersetzen. Benutzerdefinierte Linkkomponente, die das clientseitige Routing erleichtert.

Eine erweiterte Strategie, um Entwicklern die Definition benutzerdefinierter Layouts zu ermöglichen, besteht darin,
Erlauben Sie, dass die tatsächlich gerenderte untergeordnete Komponente über props:
überschrieben wird.

  }}
/>

Dies gewährt dem Entwickler die volle Kontrolle darüber, was in jedem untergeordneten Element gerendert wird
Komponente, während die Headless-Komponente ihr gesamtes
verwalten kann Struktur.

Sie können Entwicklern sogar erlauben, das Stammelement Ihrer Komponente anzupassen
über eine Requisite. Mit dieser Schaltflächenkomponente kann ein Entwickler sie beispielsweise rendern
als etwas anderes:

import { type ElementType } from 'react'

function HeadlessButton({ as, ...props }: { as?: ElementType }) {
  const Component = as ?? 'button'
  return 
}

Damit beispielsweise unterstützende Technologien die Schaltfläche wie einen Link behandeln können,
Der Entwickler kann angeben, dass ein Ankerelement zum Rendern des
verwendet werden soll. Taste:

Actually a link

Zusammenfassung

Headless-Komponenten sind viel mehr als Komponenten, die keine enthalten
Stile. Großartige Headless-Komponenten sind vollständig erweiterbar und ermöglichen dem Entwickler
um die gesamte interne HTML-Struktur anzupassen.