Shadow DOM とそれをいつ使用するかを理解する-CSSチュートリアル-php.cn

Shadow DOM とそれをいつ使用するかを理解する

DDD

リリース： 2024-10-11 10:23:29

オリジナル

377 人が閲覧しました

Understanding the Shadow DOM and When to Use It

Shadow DOM とそれをいつ使用するかを理解する

Shadow DOM は、開発者が要素をカプセル化し、スタイルを分離するのに役立つ最新の Web 開発ツールキットの強力な機能です。基本的に、Shadow DOM を使用すると、ページの残りの部分から完全に分離された要素内に「ミニ DOM」を作成できます。これは、このシャドウ DOM 内の CSS と JavaScript が外部の何にも干渉しないことを意味し、その逆も同様です。

Shadow DOM が解決する重要な問題の 1 つは、CSS スタイルの漏洩です。つまり、アプリケーションの一部に定義されたスタイルが意図せずに他の部分に影響を及ぼし、予測可能性が欠如し、コードの保守が困難になります。 Shadow DOM はスタイル境界を作成し、この問題を防ぎます。

Shadow DOM が特に役立つユースケースの例を次に示します。

複数の Web サイトに埋め込みたい、Hexabot ウィジェットなどのチャットボットウィジェットがあると想像してください。これらの Web サイトにはそれぞれ独自の CSS があり、一部のスタイルはウィジェットの外観や動作を妨げる可能性があります。たとえば、Web サイトには

のグローバルスタイルがある場合があります。また、ウィジェットの要素が単純に DOM に追加される場合、それらのスタイルによってウィジェットの外観と雰囲気が変わる可能性があります。

Web サイトの CSS がウィジェットの CSS と競合しないようにするには、Shadow DOM を利用してウィジェットをカプセル化します。これを説明する簡単な例を次に示します。

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>

ログイン後にコピー

この例では、Web サイトのグローバルスタイルがウィジェットの外観を妨げる可能性があります。

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>

ログイン後にコピー

このバージョンでは、ウィジェットはシャドウルート内にレンダリングされます。これは、Web サイトに定義されたスタイルはウィジェットに影響を与えず、その逆も同様であることを意味します。ウィジェットの CSS スタイルは分離された状態に保たれるため、ウィジェットが埋め込まれている Web サイト全体で一貫した外観が確保されます。

Shadow DOM を使用する必要があるのはどのような場合ですか?

Shadow DOM は、アプリケーションの他の部分に影響を与えたり影響を与えたりしない自己完結型コンポーネントを作成する必要がある場合に役立ちます。これを使用することを検討すべきいくつかのシナリオを次に示します。

ウィジェットまたはプラグイン: さまざまな環境に埋め込むことができる再利用可能なウィジェットを開発する場合、Shadow DOM を使用すると、外部 CSS の競合を防ぐことができます。
複雑な UI コンポーネント: スライダー、カルーセル、またはスタイルを厳密に制御する必要があるその他の UI コンポーネントなどのカスタム要素を構築している場合。
分離の必要性: 意図しない相互作用を避けるために CSS と JavaScript を完全に分離する必要があるシナリオ。

コンポーネントのスタイルと動作をカプセル化することにより、Shadow DOM はモジュール式で再利用可能な堅牢な Web コンポーネントを構築する開発者にとって重要なツールとなります。

Hexabot ライブチャットウィジェットはこの方法を使用して、外部スタイルからの干渉を受けることなく、さまざまな Web サイト間でシームレスで一貫したユーザーエクスペリエンスを保証します。これが実際に動作しているのを見ることに興味がある場合は、お気軽に Hexabot をチェックし、GitHub リポジトリにスターを付けてプロジェクトをサポートしてください!

Hexabot Github リポジトリにスターを付ける ⭐

以上がShadow DOM とそれをいつ使用するかを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。