Cara Menggunakan Dom Shadow di JavaScript

Gunakan kaedah lampiran () untuk melampirkan dom bayangan ke elemen hos, dan pilih 'buka' ke corak untuk mengakses akar bayangan; 2. Tambah tag dan tag gaya dalam akar bayang -bayang untuk mencapai pengasingan gaya; 3. Buat komponen yang boleh diguna semula dalam kombinasi dengan unsur -unsur tersuai, mulakan bayang -bayang dalam pembina dan mengikat peristiwa; 4. Gunakan tag slot untuk membolehkan kandungan luaran dimasukkan, menyokong slot lalai dan dinamakan untuk pengedaran kandungan; Shadow Dom menyediakan enkapsulasi gaya dan struktur untuk mengelakkan konflik global dan memudahkan pembinaan komponen web yang bebas dan boleh diguna semula.

Menggunakan Shadow Dom di JavaScript membolehkan anda merangkumi gaya dan markup dalam elemen DOM, menjadikannya terpencil dari seluruh halaman. Ini amat berguna untuk membina komponen web yang boleh diguna semula. Inilah cara menggunakannya dengan berkesan.

Apa itu bayangan dom?

The Shadow Dom adalah ciri penyemak imbas yang membolehkan anda melampirkan pokok dom tersembunyi, berasingan ke elemen. Pokok ini diberikan secara berasingan dari dokumen utama DOM, dan struktur dalaman, gaya, dan tingkah laku dalamannya dan tidak mengganggu seluruh halaman.

1. Melampirkan akar bayangan

Untuk menggunakan Shadow Dom, anda perlu melampirkan akar bayangan ke elemen hos menggunakan kaedah attachShadow() .

 // Buat elemen tersuai atau gunakan yang ada
const host = document.createElement ('div');

// Lampirkan akar bayangan dengan mod 'buka'
const shadowroot = host.attachshadow ({mod: 'buka'});

// sekarang anda boleh menambah kandungan ke akar bayangan
Shadowroot.innerHtml = &#39;<p> Ini berada di dalam Shadow Dom </p>&#39;;

• mode: 'open' bermaksud akar bayangan boleh diakses dari JavaScript melalui element.shadowRoot .
• mode: 'closed' menyembunyikan akar bayangan - shadowRoot akan kembali null , menjadikannya tidak dapat diakses dari luar.

Nota: 'closed' jarang digunakan dan tidak disokong sepenuhnya atau benar -benar selamat dalam amalan, jadi 'open' lebih disukai.

2. Gaya di dalam bayangan dom

Gaya yang ditakrifkan di dalam akar bayangan tidak bocor, dan gaya luaran biasanya tidak menjejaskan unsur -unsur di dalam (dengan beberapa pengecualian seperti sifat yang diwarisi).

 Shadowroot.innerHtml = `
  <yaya>
    p {
      Warna: Biru;
      font-family: sans-serif;
    }
  </gaya>
  <p> hello dari shadow dom! </p>
`;

Gaya scoped ini menghalang konflik CSS - manfaat utama apabila membina komponen yang boleh diguna semula.

3. Membuat komponen web yang boleh diguna semula

Kuasa sebenar datang apabila menggabungkan Shadow Dom dengan unsur -unsur tersuai.

 kelas myComponent memanjangkan htmlelement {
  pembina () {
    super ();

    // Lampirkan akar bayangan
    this.shadow = this.attachshadow ({mod: 'buka'});

    // Membuat kandungan
    this.shadow.innerHtml = `
      <yaya>
        butang {
          Latar Belakang: #007BFF;
          Warna: Putih;
          Sempadan: Tiada;
          Padding: 10px;
          Radius sempadan: 4px;
          kursor: penunjuk;
        }
        butang: hover {
          Latar Belakang: #0056B3;
        }
      </gaya>
      <utton> klik saya </butang>
    `;
  }

  connectedCallback () {
    Const Button = This.Shadow.QuerySelector (&#39;Button&#39;);
    Button.AdDeventListener (&#39;klik&#39;, () => {
      console.log (&#39;Butang diklik di dalam Shadow Dom!&#39;);
    });
  }
}

// Daftarkan elemen tersuai
customElements.define (&#39;My-Component&#39;, MyComponent);

Sekarang anda boleh menggunakannya di HTML:

 </my-component> </my-component>

Butang dan gayanya benar -benar terpencil.

4. Menggunakan slot untuk pengedaran kandungan

Anda boleh membenarkan kandungan luaran diproyeksikan ke dalam komponen bayangan anda menggunakan <slot> .

 this.shadow.innerHtml = `
  <dana>
    <h3> Tajuk Komponen </h3>
    <slot> </slot> <!-ini akan diisi dengan kandungan dom cahaya->
  </div>
`;

Kemudian gunakannya seperti:

 <yy-component>
  <p> Kandungan ini muncul di dalam slot. </P>
</my-component>

Anda juga boleh menggunakan slot bernama untuk lebih banyak kawalan:

 <slot name = "header"> </slot>
<slot name = "body"> </slot>

Dan dalam cahaya dom:

 <span slot = "header"> header saya </span>
<span slot = "badan"> Kandungan utama di sini </span>

Faedah utama

• Enkapsulasi : Gaya dan markup terpencil.
• Mengelakkan konflik CSS : Tidak lagi bimbang tentang pertempuran gaya global.
• Komponen yang boleh diguna semula : Membina elemen UI yang serba lengkap.
• Kod bersih : Pemisahan logik antara dalaman komponen dan seluruh aplikasi.

Batasan untuk diingat

• Anda tidak boleh secara langsung gaya Shadow Dom Elements dari luar CSS.
• Peristiwa dari dalam bayang -bayang dom mungkin perlu ditangani dengan teliti (mereka biasanya gelembung melalui sempadan bayangan).
• Debugging boleh menjadi lebih rumit kerana kandungannya tersembunyi secara lalai di DevTools melainkan anda membolehkan "Tunjukkan ejen pengguna Shadow Dom".

Menggunakan Shadow Dom adalah mudah apabila anda memahami asas -asasnya. Campurkannya dengan elemen tersuai dan templat HTML untuk komponen yang berkuasa dan dikekalkan. Pada asasnya, ia memberi anda kotak pasir yang bersih untuk membina UI web modular.

Atas ialah kandungan terperinci Cara Menggunakan Dom Shadow di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!