Jangan Bergantung pada Nilai Atribut Lalai Untuk Menggayakan Komponen Web

Jangan salah faham, saya tidak mempunyai apa-apa yang bertentangan dengan nilai lalai untuk API komponen web. Masalah saya dengan mereka ialah mereka tidak boleh dipercayai.

Masalahnya

Pendekatan biasa untuk menyediakan senarai pilihan yang tersedia untuk API adalah menggunakan jenis gabungan TypeScript.

/** The display variant for the button */
@property({reflect: true})
variant: 'default' | 'solid' | 'ghost' = 'default';

Berikut ialah beberapa CSS asas untuk membuat variasi berfungsi.

:host {
  --accent-color: #0265dc;
}

button {
  cursor: pointer;
  padding: 0.5rem;
}

:host([variant='default']) button {
  border: solid 1px var(--accent-color);
  background-color: white;
  color: var(--accent-color);
}

:host([variant='solid']) button {
  border: solid 1px var(--accent-color);
  background-color: var(--accent-color);
  color: white;
}

:host([variant='ghost']) button {
  border: solid 1px transparent;
  background-color: transparent;
  color: var(--accent-color);
}

NOTA: Contoh kod menggunakan Lit, tetapi prinsip yang dibincangkan di sini boleh digunakan dengan mudah pada perpustakaan dan rangka kerja lain.

Cabarannya ialah elemen tersuai/komponen web boleh digunakan di mana-mana sahaja. Ia boleh disisipkan dalam DOM dalam rentetan, dalam bahasa sebelah pelayan seperti PHP, ia boleh dibuat dalam fungsi createElement JavaScript, atau bahkan dalam HTML standard. Apa yang saya dapat ialah tidak selalu ada cara "jenis-selamat" untuk memastikan atribut elemen tersuai ditetapkan dengan tepat. Oleh sebab itu, salah satu item dalam senarai semak PR perpustakaan komponen kami ialah:

✅ Atribut dan sifat berfungsi apabila ditetapkan, dinyahtetapkan dan ditetapkan dengan buruk.

Menguji API Kami

Memandangkan garis panduan ini, mari kita uji persediaan API di atas.

• Set - semuanya kelihatan baik.

<my-button variant="default">Default Button</my-button>
<my-button variant="solid">Solid Button</my-button>
<my-button variant="ghost">My Button</my-button>

• Nyahtetapkan
  • tanpa set atribut ia berfungsi dengan baik kerana kami mempunyai nilai lalai dan ia dikonfigurasikan untuk mencerminkan atribut pada elemen apabila ia ditetapkan.
  • jika kita menetapkan sifat varian kepada tidak ditentukan, ia memecahkan gaya.

<!-- No attribute set -->
<my-button>No Attribute Button</my-button>

<!-- JSX example -->
<my-button variant="{undefined}">Unset Button</my-button>

• Ditetapkan dengan buruk - apabila kami menetapkan atribut varian kepada "sampah" ia juga akan rosak.

<my-button variant="rubbish">Rubbish Button</my-button>

Anda boleh menguji contoh ini di sini:

Membetulkan API

Cara paling mudah untuk membetulkannya ialah menjadikan gaya elemen butang sepadan dengan gaya lalai.

button {
  border: solid 1px var(--accent-color);
  background-color: white;
  color: var(--accent-color);
  cursor: pointer;
  padding: 0.5rem;
}

Kini kita boleh mengalih keluar kod untuk variasi lalai.

/* We can remove this */
:host([variant='default']) button {
  border: solid 1px var(--accent-color);
  background-color: white;
  color: var(--accent-color);
}

Untuk mengelakkan kekeliruan, anda boleh meninggalkan gaya dan menambah ulasan.

/* Styles for this variant are under the `button` element */
:host([variant='default']) { }

Mari kita juga mengemas kini TypeScript API untuk menjadikannya pilihan dan mengalih keluar nilai lalai.

/** The display variant for the button */
@property({ reflect: true })
variant?: 'default' | 'solid' | 'ghost';

Elemen kini berkelakuan secara konsisten jika nilai ditetapkan, tidak ditetapkan atau ditetapkan dengan buruk!

Anda boleh melihat kod akhir di sini:

Kesimpulan

Dengan mengalih keluar pergantungan pada nilai lalai, anda boleh mencipta API komponen web yang lebih berdaya tahan. Jika anda mesti mempunyai nilai lalai untuk komponen anda berfungsi dengan baik, pastikan anda menyemak artikel ini untuk mencipta komponen web yang berfungsi secara konsisten.

Atas ialah kandungan terperinci Jangan Bergantung pada Nilai Atribut Lalai Untuk Menggayakan Komponen Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!