HTML -Webkomponenten erleichtern progressive Verbesserung und CSS -Kapselung!

Jeremy Keiths aufschlussreicher Artikel im letzten Jahr hat mich HTML -Webkomponenten vorgestellt, eine Offenbarung, die meinen Ansatz zur Webentwicklung veränderte. Sein entscheidender Punkt fand tief mit: Während Sie die gleichen Ergebnisse mit DOM -Manipulation und Ereignisbehandlung erzielen könnten, bieten Webkomponenten eine robustere, tragbare und wartbare Lösung, die sich an das Prinzip der einzelnen Verantwortung hält.

Mein anfängliches Missverständnis war, dass sich alle Webkomponenten ausschließlich auf JavaScript und Shadow Dom stützten. Dies ist zwar möglich, nutzt ein überlegener Ansatz, insbesondere für fortschrittliche Verbesserung, die inhärenten HTML -Funktionen von Webkomponenten. Grundsätzlich sind sie HTML. Die jüngste Arbeit von Andy Bell liefert einen weiteren Kontext zur progressiven Verbesserung (obwohl außerhalb des Rahmens dieses Artikels).

Lassen Sie uns drei Beispiele untersuchen, die wichtige Merkmale zeigen: CSS -Kapselung und progressive Verbesserungsmöglichkeiten ohne obligatorische JavaScript -Abhängigkeit für die grundlegende Funktionalität. JavaScript wird verwendet, um die Erfahrung zu verbessern, aber die Kernfunktionalität bleibt auch ohne sie intakt. Diese Beispiele sind zusammen mit ihrem Quellcode in meiner Web UI -Boilerplate -Komponentenbibliothek (Storybook) auf GitHub verfügbar.

Beispiel 1:

<webui-disclosure></webui-disclosure>

Inspiriert von Chris Ferdinandis Tutorial zum Erstellen von Webkomponenten mit einem Offenlegungsmuster erweitert dieses Beispiel seine Demo.

Der Kern ist HTML. Webkomponenten ermöglichen benutzerdefinierte Elementnamen. Hier enthält

eine Schaltfläche zum Anzeigen/Ausblenden von Text in einem <webui-disclosure></webui-disclosure>. <div> <pre class="brush:php;toolbar:false">&lt;webui-disclosure data-bind-click-outside=&quot;&quot; data-bind-escape-key=&quot;&quot;&gt; Show / Hide &lt;div data-content=&quot;&quot;&gt; &lt;p&gt;Content to be shown/hidden.&lt;/p&gt; &lt;/div&gt; &lt;/webui-disclosure&gt;</pre> <p> Mit JavaScript deaktiviert ist die Schaltfläche (über das Attribut <code>hidden versteckt) unsichtbar und der Inhalt wird angezeigt. Dies zeigt eine einfache progressive Verbesserung. Der Inhalt ist unabhängig von JavaScript zugänglich.

Dies erweitert die Demo von Ferdinandi, indem Sie den Verschluss über ESC -Schlüssel hinzufügen oder außerhalb des Elements klicken (mit data-attribute s). Das benutzerdefinierte Element ist definiert:

customElements.define('webui-disclosure', WebUIDisclosure);

benutzerdefinierte Elementnamen verwenden gestrichelte Identität (z. B. <my-component></my-component>). Während der Armaturenbrett normalerweise Wörter trennt, ist es nicht streng erforderlich.

Die Verwendung von TypeScript ist für die Fehlerverhütung von Vorteil, aber der Einfachheit halber ist die JavaScript -ES -Modulstruktur:

class WebUIDisclosure extends HTMLElement {
  constructor() {
    super();
    this.trigger = this.querySelector('[data-trigger]');
    this.content = this.querySelector('[data-content]');
    this.bindEscapeKey = this.hasAttribute('data-bind-escape-key');
    this.bindClickOutside = this.hasAttribute('data-bind-click-outside');

    if (!this.trigger || !this.content) return;

    this.setupA11y();
    this.trigger?.addEventListener('click', this);
  }

  setupA11y() {
    // Add ARIA props/state to button.
  }

  handleEvent(e) {
    // 1. Toggle visibility of content.
    // 2. Toggle ARIA expanded state on button.
  }

  connectedCallback() {
    document.addEventListener('keyup', (e) => {
      // Handle ESC key.
    });

    document.addEventListener('click', (e) => {
      // Handle clicking outside.
    });
  }

  disconnectedCallback() {
    // Remove event listeners.
  }
}

Ereignishörer werden in constructor() und connectedCallback() (wie von Hawk Ticehurst erklärt) behandelt. Obwohl das JavaScript für grundlegende Funktionen nicht wesentlich ist, verbessert es UX und Barrierefreiheit (Hinzufügen von aria-expanded und aria-controls). Dies zeigt eine progressive Verbesserung. Es sind keine zusätzlichen CSS erforderlich; Das Styling wird vererbt.

Beispiel 2: <webui-tabs></webui-tabs>

Dieses Beispiel zeigt die CSS -Kapselung und die progressive Verbesserung in einer Registerkontrolle.

Die HTML -Struktur:

<webui-tabs>
  <div data-tablist="">
    <a data-tab="" href="https://www.php.cn/link/7426f79c9a7f5af0a6cc457b2a7fb195">Tab 1</a>
    <a data-tab="" href="https://www.php.cn/link/60430f4a984aa0a534e027339a7580a7">Tab 2</a>
    <a data-tab="" href="https://www.php.cn/link/9d4f684ba088d28ad1c2ae7d0aee496a">Tab 3</a>
  </div>

  <div data-tabpanel="">
    <p>1 - Lorem ipsum dolor sit amet consectetur.</p>
  </div>

  <div data-tabpanel="">
    <p>2 - Lorem ipsum dolor sit amet consectetur.</p>
  </div>

  <div data-tabpanel="">
    <p>3 - Lorem ipsum dolor sit amet consectetur.</p>
  </div>
</webui-tabs>

CSS ist verkapselt:

webui-tabs {
  [data-tablist] {
    /* Default styles without JavaScript */
  }

  [data-tab] {
    /* Default styles without JavaScript */
  }

  [role='tablist'] {
    /* Style role added by JavaScript */
  }

  [role='tab'] {
    /* Style role added by JavaScript */
  }

  [role='tabpanel'] {
    /* Style role added by JavaScript */
  }
}

Standardstile ([data-tablist], [data-tab]) werden unabhängig von JavaScript angewendet. Stile mit role Attributen werden nur hinzugefügt, wenn JavaScript aktiviert ist, was eine progressive Verbesserung bietet. Die Stile werden zu <webui-tabs></webui-tabs> skopiert, um Konflikte zu verhindern. Einfache Nachkommensauswahl können komplexe Methoden wie Bem.

ersetzen.

Stylesheets können über JavaScript importiert werden (nur konsumiert, wenn JavaScript verfügbar ist):

import styles from './styles.css';

class WebUITabs extends HTMLElement {
  constructor() {
    super();
    this.adoptedStyleSheets = [styles];
  }
}

customElements.define('webui-tabs', WebUITabs);

Alternativ können Inline -Stile mit Shadow DOM injiziert werden:

class WebUITabs extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
       <!-- styles go here -->
    `;
  }
}

customElements.define('webui-tabs', WebUITabs);

Das "Licht" -Dom (Inhalt zwischen Komponenten -Tags) erbt globale Stile. Der Schattendom erfordert interne Stile. Dave Ruperts Artikel verdeutlicht, wie externe Stile mit dem Shadow Dom interagieren.

progressive Verbesserung wird mit JavaScript erreicht:

class WebUITabs extends HTMLElement {
  constructor() {
    super();
    // ... (querySelector, etc.) ...
    this.createTabs();
    this.tabTriggers.forEach((tabTrigger, index) => {
      tabTrigger.addEventListener('click', (e) => { this.bindClickEvent(e); });
      tabTrigger.addEventListener('keydown', (e) => { this.bindKeyboardEvent(e, index); });
    });
  }

  createTabs() {
    // 1. Hide all tabpanels initially.
    // 2. Add ARIA props/state to tabs & tabpanels.
  }

  bindClickEvent(e) {
    e.preventDefault();
    // Show clicked tab and update ARIA props/state.
  }
  bindKeyboardEvent(e, index) {
    e.preventDefault();
    // Handle keyboard ARROW/HOME/END keys.
  }
}

customElements.define('webui-tabs', WebUITabs);

JavaScript fügt Aria -Rollen und Tastaturnavigation hinzu und verbessert die Zugänglichkeit. Ohne JavaScript bleibt das Standardverhalten (Links zu Panels) zugänglich.

<webui-ajax-loader></webui-ajax-loader> Beispiel 3:

Dieses Beispiel, das mit Shadow DOM vollständig von JavaScript generiert wird, wird nur dann gerendert, wenn JavaScript aktiviert ist. Es wird verwendet, um Ladezustände für AJAX -Anforderungen anzuzeigen.

Das HTML ist einfach:

<webui-ajax-loader></webui-ajax-loader>

Das JavaScript:

class WebUIAjaxLoader extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <svg part="svg" role="img"><title>loading</title>
<circle cx="50" cy="50" r="47"></circle></svg>
    `;
  }
}

customElements.define('webui-ajax-loader', WebUIAjaxLoader);

part Das Attribut ::part ermöglicht das Styling der SVG von außerhalb der Komponente mithilfe des

pseudo-selektors:

webui-ajax-loader::part(svg) {
  // Shadow DOM styles for the SVG...
}

CSS können benutzerdefinierte Eigenschaften verwendet werden:

<webui-disclosure data-bind-click-outside="" data-bind-escape-key="">
  Show / Hide
  <div data-content="">
    <p>Content to be shown/hidden.</p>
  </div>
</webui-disclosure>

progressive Verbesserung ist inhärent; Der Loader wird nur angezeigt, wenn JavaScript unterstützt wird.

Schlussfolgerung

HTML -Webkomponenten priorisieren HTML und verwenden JavaScript nur bei Bedarf für erweiterte Funktionen und Einkapselung. Sie bieten einen leistungsstarken Ansatz zum Aufbau von robusten, wartbaren und zugänglichen Webanwendungen.