Aufladende integrierte Elemente mit Webkomponenten 'ist' einfacher als Sie denken

In diesem Artikel wird ein leistungsstarker Aspekt von Webkomponenten untersucht: Anpassen integrierter HTML-Elemente. Während wir zuvor das Erstellen benutzerdefinierter Elemente behandelt haben, verbessert diese Technik vorhandene Elemente und bietet Vorteile wie eine verbesserte SEO und Zugänglichkeit. Es ähnelt dem Erstellen von vollständig unabhängigen Elementen, jedoch mit wichtigen Unterschieden.

Artikelserie:

• Webkomponenten sind einfacher als Sie denken
• Interaktive Webkomponenten sind einfacher als Sie denken
• Die Verwendung von Webkomponenten in WordPress ist einfacher als Sie denken
• Aufladende integrierte Elemente mit Webkomponenten „ist“ einfacher als Sie denken (Sie sind hier)
• Kontextbewusste Webkomponenten sind einfacher als Sie denken
• Webkomponenten Pseudoklassen und Pseudoelemente sind einfacher als Sie denken

Das is -Attribut verwandelt ein Standardelement in eine Webkomponente. Dies nutzt die inhärente Struktur und Funktionen des Elements und fügt gleichzeitig benutzerdefinierte Funktionen hinzu. Suchmaschinen und Bildschirmleser verstehen leicht Standardelemente, sodass dieser Ansatz zugänglicher ist, als völlig neue, benutzerdefinierte Tags zu erstellen.

Wichtiger Hinweis: Safari und einige weniger häufige Browser unterstützen nur vollständig unabhängige benutzerdefinierte Elemente, nicht diese integrierte Elementanpassung. Wir werden später Polyfills ansprechen.

Lassen Sie uns die refaktorieren<apocalyptic-warning></apocalyptic-warning> Element aus einem früheren Artikel als individuelles integriertes Element. Die Kernänderung beinhaltet die Erweiterung eines bestimmten Elements (z. B. HTMLDivElement ) anstelle des generischen HTMLElement und addiert { extends: 'div' } zu customElements.define() .

 CustomElements.define (
  "apokalyptische Warmen",
  Klasse ApocalypseWarning erweitert Htmldelement {
    constructor () {
      super();
      lass warning = document.getElementById ("WarningTemplate");
      lass MyWarning = Warnung.Content;
      this.attachShadow ({modus: "öffnen"}). appendChild (myWarning.clonenode (true));
    }
  },
  {erweitert: "div"}
);

Die HTML ändert sich von<apocalyptic-warning></apocalyptic-warning> Zu<div is="apocalyptic-warning"> .<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div is=&quot;apocalyptic-warning&quot;&gt; Untoten &lt;/div&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p>Denken Sie daran: Safari -Benutzer werden die Verbesserungen der Webkomponenten nicht angezeigt.</p> <p> Nur spezifische Elemente unterstützen Shadow Dom. Sicherheitsüberlegungen beschränken dies auf Layoutelemente wie<code><div> Anwesend<code><nav></nav> Anwesend<main></main> usw., Textelemente mögen<h1></h1> Zu<h6></h6> und die Element. Autonome benutzerdefinierte Elemente sind ebenfalls enthalten.<p> Das Erstellen einer Webkomponente erfordert nicht immer Shadow DOM. Erstellen wir ein Bild mit einer integrierten Leuchtkiste, um dies zu veranschaulichen. Wir werden das <code>is Attribut und ein Datenattribut ( data-lbsrc ) für das größere Bild verwenden.

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174243979698755.jpg" class="lazy" alt="Still, aber unangemessen Zombie Ninja" data-lb is="light-box">

Das JavaScript ist optimiert und lässt Schattendom, Vorlagen und Slots weg:

 CustomElements.define (
  "Leuchten",
  Klasse Lightbox erweitert HtmlimageElement {
    constructor () {
      super();
      sei lb = document.createelement ("div");
      lb.style.display = "Keine";
      lb.Style.position = "Absolute";
      lb.style.height = "100VH";
      lb.style.width = "100VW";
      lb.style.top = 0;
      lb.style.left = 0;
      lb.style.background = `RGBA (0,0,0, 0,7) URL ($ {that.dataset.lbsrc}) No-Repeat Center`;
      lb.style.backgroundSize = "content";
      lb.addeventListener ("click", () => lb.style.display = "keine");
      this.parentnode.insertbefore (lb, this);
      this.adDeVentListener ("Click", () => lb.style.display = "Block");
    }
  },
  {erweitert: "img"}
);

Um die Kompatibilität des Cross-Browsers, insbesondere für Safari, zu gewährleisten, verwenden wir eine Polyfill. Während allgemeine Polyfills existieren, ist ein gezielterer Ansatz oft effizienter. Da Safari autonome benutzerdefinierte Elemente unterstützt, können wir eine autonome Erstellung schaffen<lightbox-polyfill></lightbox-polyfill> Element als Fallback. (Der Code für diese Polyfill wird für die Kürze weggelassen, beinhaltet jedoch die Erstellung einer ähnlichen Lightbox-Funktionalität innerhalb eines autonomen benutzerdefinierten Elements.) Die bedingte Logik würde dann zwischen dem benutzerdefinierten integrierten Element und der Polyfill basierend auf dem Browserunterstützung wechseln. Dies gewährleistet eine konsistente Funktionalität über alle Browser hinweg. Der letzte Schritt wäre, diese bedingte Logik für die Verwendung der Polyfill nur bei Bedarf einzubeziehen.

Dieser Ansatz ermöglicht das Erstellen maßgeschneiderter integrierter Elemente, wobei die semantische HTML beibehalten und die breitere Browserkompatibilität durch die Verwendung von Polyfills gewährleistet.