Memahami Shadow DOM dan Masa Menggunakannya-tutorial css-php.cn

Memahami Shadow DOM dan Masa Menggunakannya

DDD

Lepaskan： 2024-10-11 10:23:29

asal

377 orang telah melayarinya

Understanding the Shadow DOM and When to Use It

Memahami Shadow DOM dan Masa Menggunakannya

Shadow DOM ialah ciri berkuasa dalam kit alat pembangunan web moden yang membantu pembangun merangkum elemen dan mengasingkan gaya. Pada asasnya, Shadow DOM membenarkan anda mencipta "mini-DOM" di dalam elemen yang diasingkan sepenuhnya daripada seluruh halaman. Ini bermakna CSS dan JavaScript di dalam DOM bayangan ini tidak akan mengganggu apa-apa di luarnya dan begitu juga sebaliknya.

Salah satu masalah utama yang diselesaikan oleh Shadow DOM ialah kebocoran gaya CSS—di mana gaya yang ditakrifkan untuk satu bahagian aplikasi anda secara tidak sengaja menjejaskan bahagian lain, yang membawa kepada kekurangan kebolehramalan dan kod yang lebih sukar untuk diselenggara. Shadow DOM mencipta sempadan gaya, menghalang isu ini.

Berikut ialah contoh kes penggunaan yang mana Shadow DOM amat berguna:

Bayangkan anda mempunyai widget chatbot—seperti widget Hexabot—yang anda mahu benamkan pada berbilang tapak web. Setiap tapak web ini mempunyai CSS sendiri dan beberapa gaya mungkin mengganggu penampilan dan gelagat widget anda. Sebagai contoh, tapak web mungkin mempunyai gaya global untuk

elemen dan jika elemen widget anda hanya ditambahkan pada DOM, gaya tersebut boleh mengubah rupa dan rasa widget anda.

Untuk mengelakkan CSS tapak web daripada bercanggah dengan CSS widget anda, anda boleh memanfaatkan Shadow DOM untuk merangkum widget anda. Berikut ialah contoh mudah untuk menggambarkan ini:

Tanpa Shadow DOM:

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="./style.css">
<script src="<<WIDGET URL>>/hexabot-widget.umd.js"></script>

<div id="hb-chat-widget"></div>
<script>
  const el = React.createElement;
  const domContainer = document.getElementById('hb-chat-widget');
  ReactDOM.render(
    el(HexabotWidget, {
      apiUrl: 'https://api.yourdomain.com',
      channel: 'offline',
      token: 'token123',
    }),
    domContainer,
  );
</script>

Salin selepas log masuk

Dalam contoh ini, sebarang gaya global daripada tapak web mungkin mengganggu penampilan widget.

Dengan Shadow DOM:

<script crossorigin src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="<<WIDGET URL>>/hexabot-widget.umd.js"></script>

<div id="hb-chat-widget"></div>
<script>
  // Create the shadow root and attach it to the widget container
  const widgetContainer = document.getElementById('hb-chat-widget');
  const shadowRoot = widgetContainer.attachShadow({ mode: 'open' });

  // Create a new div inside the shadow root to serve as the rendering target
  const shadowContainer = document.createElement('div');
  shadowRoot.appendChild(shadowContainer);

  // Add styles inside the shadow root by importing the CSS file into the shadow DOM
  const linkElement = document.createElement('link');
  linkElement.rel = 'stylesheet';
  linkElement.href = './style.css';
  shadowRoot.appendChild(linkElement);

  // Render the widget inside the shadow root
  const el = React.createElement;
  ReactDOM.render(
    el(HexabotWidget, {
      apiUrl: 'https://api.yourdomain.com',
      channel: 'offline',
      token: 'token123',
    }),
    shadowContainer,
  );
</script>

Salin selepas log masuk

Dalam versi ini, widget dipaparkan dalam akar bayang. Ini bermakna gaya yang ditakrifkan untuk tapak web tidak akan memberi kesan kepada widget, dan begitu juga sebaliknya. Gaya CSS untuk widget anda diasingkan, memastikan paparan yang konsisten merentasi mana-mana tapak web yang widget dibenamkan.

Bilakah Anda Harus Menggunakan Shadow DOM?

Shadow DOM berguna apabila anda perlu membuat komponen serba lengkap yang tidak akan terjejas atau menjejaskan bahagian lain aplikasi. Berikut ialah beberapa senario yang anda patut pertimbangkan untuk menggunakannya:

Widget atau Pemalam: Apabila membangunkan widget boleh guna semula yang boleh dibenamkan dalam pelbagai persekitaran, menggunakan Shadow DOM akan menghalang konflik CSS luaran.
Komponen UI Kompleks: Jika anda sedang membina elemen tersuai seperti peluncur, karusel atau komponen UI lain yang anda inginkan kawalan ketat ke atas penggayaan.
Keperluan Pengasingan: Mana-mana senario di mana anda memerlukan pengasingan lengkap CSS dan JavaScript untuk mengelakkan interaksi yang tidak disengajakan.

Dengan merangkum gaya dan gelagat sesuatu komponen, Shadow DOM boleh menjadi alat penting untuk pembangun membina komponen web modular, boleh guna semula dan teguh.

Widget sembang langsung Hexabot menggunakan kaedah ini untuk memastikan pengalaman pengguna yang lancar dan konsisten merentas tapak web yang berbeza, tanpa sebarang gangguan daripada gaya luaran. Jika anda berminat untuk melihat tindakan ini, sila semak Hexabot dan bintangkan repositori GitHub untuk menyokong projek!

Bintangkan Repositori Github Hexabot ⭐

Atas ialah kandungan terperinci Memahami Shadow DOM dan Masa Menggunakannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!