Elemen terbina dalam supercharging dengan komponen web 'adalah' lebih mudah daripada yang anda fikirkan

Artikel ini menerangkan aspek komponen web yang kuat: Menyesuaikan unsur-unsur HTML terbina dalam. Walaupun kami sebelum ini telah meliputi mencipta elemen tersuai, teknik ini meningkatkan unsur -unsur sedia ada, memberikan manfaat seperti SEO dan kebolehcapaian yang lebih baik. Ia sama dengan mewujudkan elemen bebas sepenuhnya, tetapi dengan perbezaan utama.

Siri Artikel:

• Komponen web lebih mudah daripada yang anda fikirkan
• Komponen web interaktif lebih mudah daripada yang anda fikirkan
• Menggunakan komponen web di WordPress lebih mudah daripada yang anda fikirkan
• Elemen terbina dalam supercharging dengan komponen web "adalah" lebih mudah daripada yang anda fikirkan (anda ada di sini)
• Komponen web yang menyedari konteks lebih mudah daripada yang anda fikirkan
• Kelas pseudo komponen web dan elemen pseudo lebih mudah daripada yang anda fikirkan

Atribut is mengubah elemen standard ke dalam komponen web. Ini memanfaatkan struktur dan ciri yang wujud unsur sambil menambah fungsi tersuai. Enjin carian dan pembaca skrin dengan mudah memahami unsur -unsur standard, menjadikan pendekatan ini lebih mudah diakses daripada membuat tag tersuai sepenuhnya.

Nota Penting: Safari dan beberapa pelayar yang kurang biasa hanya menyokong elemen tersuai bebas sepenuhnya, bukan penyesuaian elemen terbina dalam ini. Kami akan menangani polyfills kemudian.

Mari kita refactor<apocalyptic-warning></apocalyptic-warning> elemen dari artikel sebelumnya sebagai elemen terbina dalam yang disesuaikan. Perubahan teras melibatkan memperluaskan elemen tertentu (misalnya, HTMLDivElement ) dan bukannya HTMLElement generik, dan menambah { extends: 'div' } ke customElements.define() .

 customElements.define (
  "perang apokaliptik",
  Kelas Apocalypsewarning memanjangkan HTMLDIVELEMENT {
    pembina () {
      super ();
      biarkan amaran = document.getElementById ("WarningTemplate");
      Biarkan myWarning = amaran.content;
      this.attachshadow ({mod: "buka"}). appendChild (myWarning.clonenode (true));
    }
  },
  {Extends: "Div"}
);

HTML berubah dari<apocalyptic-warning></apocalyptic-warning> ke<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; Undead &lt;/div&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p>Ingat: Pengguna Safari tidak akan melihat peningkatan komponen web.</p> <p> Hanya elemen khusus yang menyokong Shadow Dom. Pertimbangan keselamatan membatasi ini dengan elemen susun atur seperti<code><div> ,<code><nav></nav> ,<main></main> , dll, elemen teks seperti<h1></h1> ke<h6></h6> , dan yang elemen. Unsur -unsur adat autonomi juga termasuk.<p> Mewujudkan komponen web tidak selalu memerlukan Shadow Dom. Mari kita bina imej dengan kotak cahaya terbina dalam untuk menggambarkan ini. Kami akan menggunakan <code>is dan atribut data ( data-lbsrc ) untuk imej yang lebih besar.

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174243979698755.jpg" class="lazy" alt="Senyap tetapi zombie ninja" data-lb is="light-box">

JavaScript diselaraskan, menghilangkan bayangan dom, templat, dan slot:

 customElements.define (
  "kotak cahaya",
  Kelas Lightbox memanjangkan HTMLimageElement {
    pembina () {
      super ();
      biarkan lb = document.createElement ("div");
      lb.style.display = "none";
      lb.style.position = "mutlak";
      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 ($ {this.dataset.lbsrc}) No-Repeat Center`;
      lb.style.backgroundSize = "contain";
      lb.addeventListener ("klik", () => lb.style.display = "none");
      this.parentNode.insertBefore (lb, this);
      this.addeventListener ("klik", () => lb.style.display = "block");
    }
  },
  {extends: "img"}
);

Untuk memastikan keserasian penyemak imbas, terutamanya untuk Safari, kami akan menggunakan polyfill. Walaupun polyfills umum wujud, pendekatan yang lebih disasarkan sering lebih cekap. Oleh kerana safari menyokong elemen adat autonomi, kita boleh membuat autonomi<lightbox-polyfill></lightbox-polyfill> elemen sebagai sandaran. (Kod untuk polyfill ini ditinggalkan untuk keringkasan tetapi akan melibatkan mewujudkan fungsi Lightbox yang sama dalam elemen adat autonomi.) Logik bersyarat akan beralih antara elemen terbina dalam yang disesuaikan dan polyfill berdasarkan sokongan penyemak imbas. Ini memastikan fungsi yang konsisten merentas semua pelayar. Langkah terakhir adalah untuk menggabungkan logik bersyarat ini untuk menggunakan polyfill hanya apabila perlu.

Pendekatan ini membolehkan untuk mewujudkan unsur-unsur terbina dalam yang disesuaikan sambil mengekalkan HTML semantik dan memastikan keserasian pelayar yang lebih luas melalui penggunaan polyfills.