Komponen Web: Satu Pengenalan

Dalam pembangunan web moden, rangka kerja sangat popular. Hampir semua rangka kerja moden mempunyai konsep komponen. Idea di sebalik komponen ialah memecahkan logik bahagian hadapan anda kepada bahagian kecil yang boleh digunakan semula yang boleh anda kongsi merentas halaman atau projek. Secara umumnya komponen ini tidak boleh digunakan semula merentas rangka kerja lain dan memerlukan proses binaan untuk menyusunnya ke JavaScript yang boleh dijalankan dalam penyemak imbas.

Bagaimana jika saya memberitahu anda ada cara untuk membina komponen menggunakan JavaScript vanila dan API penyemak imbas yang tersedia secara meluas yang boleh anda kongsi merentas rangka kerja? Ini kini menjadi realiti dengan Komponen Web. Di sini kita akan melihat dengan pantas pelbagai jenis Komponen Web, dan beberapa kuasa yang boleh kita gunakan dengannya.

Asas Komponen Web

Komponen Web ditakrifkan menggunakan Pendaftaran Elemen Tersuai. Ini ialah API yang dibekalkan oleh kebanyakan penyemak imbas moden. Untuk mencipta Komponen Web, anda hanya mentakrifkannya dalam kod dan kemudian mendaftarkannya dalam Pendaftaran Elemen Tersuai. Setelah ia didaftarkan dan ditakrifkan menggunakan konvensyen penamaan yang betul, komponen itu tersedia untuk digunakan dalam halaman.

customElements.define("my-component", MyComponentClass);

Jenis Komponen Web

Komponen Web boleh dipecahkan kepada dua kategori berbeza. Ini ialah Komponen Web Autonomi dan Elemen Terbina Dalam Tersuai.

Komponen Web Autonomi ialah lanjutan daripada kelas HTMLElement generik. Komponen ini secara amnya lebih fleksibel, kerana anda pada dasarnya membina elemen HTML anda sendiri dengan kuasa untuk menyesuaikan semua tingkah laku dari bawah. Ini termasuk elemen akar yang digunakan untuk memaparkan komponen. Setelah ditakrifkan, anda menggunakan Komponen Web Autonomi sama seperti elemen HTML yang lain.

<my-button>



<p><strong>Custom Built-In Elements</strong> extend specific HTML elements.  For example, you may extend the HTMLButtonElement class or the HTMLAnchorElement.  These are meant to augment the functionality of existing HTML elements. To use a Custom Built-In element, you use the "is" attribute on the HTML element you are augmenting to tell it that it is an instance of the Web Component.<br>
</p>

<pre class="brush:php;toolbar:false"><button is="my-button">



<h3>
  
  
  Naming Web Components
</h3>

<p>When defining a Web Component, there are certain conventions that must be followed.  </p>

<p>Generally you will name your components similar to HTML elements with your own prefix attached to keep things simple (i.e. <my-button>).  The basic rules require that the element name start with a lowercase letter, and it must include a hyphen.  These guidelines will get you by for most cases, but I would recommend looking at the HTML spec if you're curious about all rules.<br>
</my-button></p>

<pre class="brush:php;toolbar:false"><!--Valid-->
<my-button></my-button>
<your-button></your-button>

<!--Invalid-->
<my-button></my-button>

<mybutton></mybutton>

Cangkuk Kitaran Hayat

Komponen web mempunyai cangkuk kitar hayat khusus yang digunakan untuk bertindak balas terhadap fasa berbeza yang dilalui oleh komponen tersebut. Cangkuk adalah seperti berikut:

• connectedCallback -> Berjalan apabila komponen dilampirkan pada DOM.
• panggil balik terputus -> Berjalan apabila komponen ditanggalkan daripada DOM.
• panggilan balik diterima pakai -> Berjalan setiap kali komponen dilampirkan pada DOM baharu.
• attributeChangedCallback -> Berjalan apabila atribut daripada senarai "observedAttributes" dikemas kini.

class MyComponent extends HTMLElement {
    static observedAttributes = ["btntype"]
    connectedCallback() {
        // Handle when the component is attached to the DOM
    }
    disconnectedCallback() {
        // Handle when the component is removed from the DOM
    }
    adoptedCallback() {
        // Handle when the component is attached to a new DOM
    }
    attributeChangedCallback(name, oldValue, newValue) {
        // Trigged when the "btntype" attribute is changed since it is in the list of observedAttributes.
        // "name" will be the name of the attribute that changed.
        // "oldValue" is the value before the change.
        // "newValue" is the new value after the change.
    }
}

Cakuk kitar hayat ini digunakan untuk melakukan sebarang kerja permulaan atau pembersihan yang diperlukan semasa mencipta/memusnahkan tika komponen. AttributChangedCallback amat berguna, kerana ia membenarkan untuk bertindak balas terhadap kemas kini nilai atribut. Komponen Web mempunyai atribut statik khas yang dipanggil "observedAttributes", yang dimaksudkan sebagai tatasusunan nama atribut (rentetan) yang akan mencetuskan attributeChangedCallback.

Kebolehcapaian

Kebolehaksesan ialah pertimbangan penting dalam mana-mana pembangunan web yang dilakukan hari ini. Apabila ia berkaitan dengan komponen web, anda menggunakan atribut ARIA seperti yang anda lakukan dalam HTML biasa atau dalam rangka kerja, tetapi secara amnya anda akan mewarisi peranan terbina dalam dan kefungsian kebolehaksesan elemen HTML yang anda gunakan.

Semua garis panduan yang sama digunakan di sini yang akan berlaku di tempat lain. Contohnya, pastikan anda menggunakan HTML semantik semasa membina komponen anda, tambahkan sebarang pengendalian papan kekunci yang diperlukan yang mungkin diperlukan dan pastikan perkara seperti fokus dan kontras warna diurus dengan betul.

Shadow DOM

Shadow DOM mungkin merupakan bahagian Komponen Web yang paling mengelirukan dan kontroversi. Shadow DOM pada asasnya ialah sekeping DOM berskop berasingan yang hidup dalam Komponen Web

Shadow DOM adalah kebimbangan terutamanya untuk Komponen Web Autonomi kerana elemen Terbina Dalam Tersuai hanya menambah elemen HTML sedia ada. Untuk Komponen Web Autonomi, teg tersuai yang mewakili elemen (iaitu ) dianggap sebagai elemen "hos". Dalam elemen hos ialah "akar bayangan". Dalam akar bayang ialah tempat penanda untuk komponen dipaparkan.

Berikut ialah contoh di mana anda akan melihat elemen "butang saya" sebagai hos, dengan Shadow DOM di dalamnya.

Apabila membina komponen web, terdapat dua mod yang boleh anda tetapkan kepada Shadow DOM. Mod ini adalah "terbuka" dan "tertutup". Open Shadow DOM boleh diakses dengan JavaScript di luar Shadow Root dalam Light DOM, manakala Shadow DOM tertutup tidak boleh.

customElements.define("my-component", MyComponentClass);

Mana-mana Gaya yang anda tentukan dalam Shadow DOM adalah skop dalam Shadow DOM dan tidak mencemarkan seluruh dokumen. Sebarang gaya yang ditakrifkan dalam "DOM Cahaya" (selebihnya dokumen) tidak menembusi Shadow DOM (pembolehubah CSS adalah pengecualian, tetapi kami tidak akan membincangkannya di sini). Penyemak imbas moden menyediakan cara untuk menyasarkan Shadow DOM terus daripada Light DOM menggunakan CSS menggunakan bahagian. Anda boleh menambah bahagian pada Shadow DOM komponen anda dengan menambahkan atribut bahagian pada markup anda. Bahagian tersebut kemudiannya boleh disasarkan dalam CSS menggunakan ::part pseudo selector. Ini sangat berguna, tetapi ia agak terhad oleh alam semula jadi. Anda tidak boleh merantai pemilih anak daripada pemilih ::bahagian. Anda hanya boleh menyasarkan elemen khusus yang mempunyai atribut "bahagian" dalam Shadow DOM.

Kebolehaksesan juga merupakan pertimbangan penting apabila bekerja dengan Shadow DOM. Jika anda pernah menggunakan atribut ARIA, maka anda sudah biasa dengan "aria-describedby" dan "aria-labelledby", yang biasanya diberikan ID yang merujuk elemen lain yang mengandungi label atau perihalan kandungan untuk pembaca skrin. Shadow DOM menyimpan ID yang diskop secara berasingan serupa dengan gaya, jadi anda tidak boleh merujuk ID yang tinggal dalam Shadow DOM daripada Light DOM dan begitu juga sebaliknya. Ini boleh menimbulkan cabaran apabila cuba memberikan penerangan terperinci yang perlu anda berikan secara dinamik, tetapi penyelesaiannya wujud yang tidak akan kami pelajari dalam pengenalan ini.

Templat dan Slot

Templat dan slot ialah alatan yang boleh digunakan dalam kombinasi dengan Shadow DOM untuk meningkatkan komponen web. Templat digunakan untuk mencipta coretan boleh guna semula dalam Komponen Web, manakala slot digunakan untuk mendedahkan "lubang" yang kandungan daripada DOM Cahaya boleh dihantar ke dalamnya.

Templat berguna jika terdapat coretan HTML yang anda perlukan untuk dipaparkan berulang kali dalam Komponen Web. Ia juga boleh digunakan di luar Komponen Web, tetapi mempunyai kes penggunaan yang lebih terhad. Ia dilaksanakan menggunakan teg "template".

Slot digunakan untuk menghantar kandungan daripada Light DOM ke dalam Komponen Web dan dilaksanakan menggunakan teg "slot". Ini berguna jika anda mempunyai komponen generik yang mungkin memerlukan kandungan dinamik untuk dimasukkan. Contoh yang baik mungkin ialah komponen kad generik, di mana anda boleh mempunyai slot yang terdedah untuk menghantar markup ke dalam badan kad. Slot mempunyai atribut "nama" yang boleh anda sediakan untuk mengenal pasti slot secara unik. Ini berguna jika anda perlu meletakkan berbilang slot ke dalam komponen web. Apabila menghantar kandungan, anda hanya boleh menghantar atribut dengan nilai slot="your-slot-name" dan kandungan akan dihantar ke slot dengan nama yang sepadan.

Slot dan Shadow DOM mempunyai interaksi unik yang patut diberi perhatian. Slot boleh mempunyai kandungan lalai yang dipaparkan sekiranya tiada apa-apa yang dihantar masuk. Kandungan yang dihantar ke dalam slot berada dalam Light DOM dan "disalin cetek" ke dalam Shadow DOM. Anda boleh melihat ini secara visual dalam pemeriksa penyemak imbas. Kandungan slot akan dipaparkan dalam komponen web, tetapi dalam DOM, kandungan secara teknikalnya berada di luar komponen web dan menyediakan pautan ke slot.

Ini bermakna semua kandungan slot digayakan dan dirujuk sama seperti kandungan lain dalam Light DOM. Gaya dalam DOM Cahaya akan memberi kesan kepada kandungan slot, manakala gaya Shadow DOM tidak. Terdapat API tersedia untuk berinteraksi dengan kandungan slot dari dalam komponen web.

Sokongan Komponen Web

Komponen Web disokong agak baik dalam penyemak imbas moden. Pengecualian utama ialah Safari, yang tidak menyokong Elemen Terbina Dalam Tersuai. Jika anda perlu menyokong pelayar lama seperti Internet Explorer 11, anda perlu mengisi beberapa perkara.

Contoh Asas

Sekarang kita telah mendapat pengenalan ringkas tentang semua konsep asas, mari kita lihat beberapa contoh.

Elemen Tersuai Autonomi

Berikut ialah contoh elemen tersuai autonomi yang dipanggil "butang saya":

customElements.define("my-component", MyComponentClass);

Perkara pertama yang perlu diperhatikan ialah kod itu kebanyakannya sama. Perbezaan terbesar ialah kami melanjutkan terus HTMLButtonElement, dan kemudian kami juga mengisytiharkan bahawa kami melanjutkan butang apabila kami mentakrifkan elemen tersuai.

Kami juga menghabiskan lebih sedikit masa menulis kod untuk memaparkan elemen. Memandangkan kami memanjangkan HTMLButtonElement, komponen tersebut hanyalah butang HTML dengan kuasa tambahan. Kami akan memberitahu butang HTML bahawa ia adalah "butang saya" dengan menggunakan atribut HTML "adalah".

Berikut ialah contoh secara langsung:

Sekali lagi anda akan perasan bahawa kami menggunakan atribut "adalah" untuk menambah elemen butang HTML sedia ada. Anda juga akan perasan bahawa sama seperti elemen tersuai Autonomi, kami boleh melampirkan pendengar acara dan bekerja dengan butang seperti yang kami lakukan untuk mana-mana elemen HTML lain, yang lebih masuk akal di sini kerana ia sebenarnya hanyalah butang HTML lanjutan.

Membungkus

Komponen web ialah cara vanila untuk menyelesaikan masalah mencipta komponen boleh kongsi yang boleh digunakan semula merentas halaman dan projek yang berbeza. Ia berfungsi lebih seperti elemen HTML biasa, yang boleh menyebabkan sedikit kekeliruan, tetapi akhirnya ia boleh menjadi sangat berguna dan membantu menyelesaikan banyak masalah yang sama yang disasarkan oleh rangka kerja moden.

Di sini kami telah mengambil pandangan yang sangat pengenalan kepada komponen web, konsep yang berbeza di sekelilingnya dan beberapa contoh pantas yang mempamerkan fungsi asasnya. Dari sini kita boleh mula menyelam lebih mendalam tentang cara kita boleh menjadikan pembinaan dan penggunaannya lebih mudah, dan melihat bagaimana kita boleh menangani beberapa masalah kesakitan mereka.

Jika anda berminat, sila lihat contoh dalam GitHub, atau anda boleh bermain dengannya dalam Code Pen.

• Contoh Elemen Tersuai Autonomi
• Contoh Elemen Terbina Dalam Tersuai
• Contoh Templat Asas Bonus!

Dalam artikel seterusnya, kami akan melihat cara kami boleh mengembangkan penggunaan templat dan slot, serta cara kami boleh membuat pemaparan lebih mudah. Nantikan!

Atas ialah kandungan terperinci Komponen Web: Satu Pengenalan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!