Slot | OMI

Penggunaan

Di sini kita mengambil tombol sebagai contoh untuk mengilustrasikan slot.

<o-button>Saya adalah teks tombol</o-button>

Lihat kode sumber:

@tag('o-button') export default class Button extends Component { ... render(props) { return <button disabled={propsed} {...extractClass(props, 'o-button', { ['o-button-' + props]: props, ['o-button-' + props]: props, 'is-plain': props, 'is-round': props, 'is-circle': props, 'is-disabled': propsed, 'is-block': props })}> {props} <slot></slot> </button> } }

Lalu mengapa mendukung props? Ini karena jika Anda mengimpor JS terkait setelah menggunakan tag kustom, konten dalam slot akan langsung ditampilkan di halaman, yang memberikan pengalaman buruk. Oleh karena itu, jika Anda tidak dapat mengimpor JS dari komponen kustom terlebih dahulu, Anda dapat menggunakan metode berikut untuk mencapai efek yang sama dan menghindari masalah di atas:

<o-button text="Saya adalah teks tombol"></o-button>

Slot Bernama

Slot bernama dapat menentukan di mana akan disisipkan.

<o-el> <span slot="abc"></span> <span slot="def"></span> </o-el>

Definisi komponen:

@tag('o-el') export default class Button extends Component { render(props) { return <div> <slot name="abc"></slot> <div>Some Info</div> <slot name="def"></slot> </div> } }

Gaya untuk ShadowDOM dan LightDOM

• ShadowDOM
  • Pseudo-elemen ::part()
  • Selektor :host-context
  • Selektor :host
  • Selektor :host dan kelas
  • Variabel CSS
• LightDOM
  • Pseudo-selektor ::slotted()