Invokerコマンド：ダイアログ、ポップオーバーなどを操作する追加の方法？

dialog要素とポップオーバーAPIは、Webプラットフォームへの強力な追加です。 私は最近、それらのアプリケーションの詳細な分析を提供し、文書化されていないテクニックを明らかにしました。 ただし、それらの個別の実装は不必要に複雑だと感じています Webブラウザーは、「Invokerコマンド」（および

属性）を導入して、ポップオーバー、ダイアログ、将来の機能との相互作用を簡素化し、JavaScriptの信頼を最小限に抑えます。 これらの属性には、新しいJavaScriptイベントも導入されています

command実験的ステータス：commandfor

覚えておいてください、これらは実験的な特徴です。 それらを有効にしてください：

Chrome Canary 134（flag：

）

Firefox Nightly 135（flag：
• ）enable-experimental-web-platform-features
Safari Technology Preview（flag：
• ）dom.element.invokers.enabled
• スクリプトタスクのエレガントな抽象化は、広範囲にわたる採用が可能性が高いことを示唆しています。 InvokerAttributesEnabled
基本的な使用法：

、）を属性（「show-modal」などのコマンド名を指定）と（ターゲット要素のIDを参照）を使用します。

>> <button></button> <a></a>コマンド値を調べてみましょう。command commandfor

属性値：

<button command="show-modal" commandfor="dialogA">Show dialogA</button>
<dialog id="dialogA">...</dialog>

：HTMLに相当します

。 JavaScriptなしでモーダルディスプレイを可能にします。 これは、既存のHTMLに誘惑されたポップオーバーを反映​​しており、より一貫したアプローチを作成します。

• show-modal：非モーダルダイアログのshowModal()コマンドはありません。 ポップオーバーAPIの機能を考えると、非モーダルダイアログは時代遅れになる可能性があります。

• ：HTMLに相当し、ダイアログを閉じます。show show

• 、

  、close：これらのミラーclose()、

  、および
。 便利ですが、それらの機能は既存のポップオーバー属性を通じて既にアクセス可能です。

• show-popoverこれが要約です：hide-popover

  Command	Equivalent JavaScript Method	Notes
  show-modal	showModal()	Shows a modal dialog.
  close	close()	Closes a dialog or popover.
  show-popover	showPopover()	Shows a popover (redundant with existing popover attributes).
  hide-popover	hidePopover()	Hides a popover (redundant with existing popover attributes).
  toggle-popover	togglePopover()	Toggles a popover (redundant with existing popover attributes).
  --custom-command	N/A	Custom commands prefixed with --.

  javaScriptイベント処理：

  Invokerコマンドは、ターゲット要素のcommandイベントをトリガーします。 これは、dialogイベントがないshow要素に特に役立ちます。

  <button command="show-modal" commandfor="dialogA">Show dialogA</button>
  <dialog id="dialogA">...</dialog>

  ポップオーバーイベントの処理は似ています：

  dialogs.forEach(dialog => {
    dialog.addEventListener("command", event => {
      if (event.command === "show-modal") { /* Dialog shown */ }
      else if (event.command === "close") { /* Dialog closed */ }
    });
  });

  呼び出しボタン要素を提供します。 属性は、javaScript：event.sourceを介して設定することもできます

  popovers.forEach(popover => {
    popover.addEventListener("command", event => {
      if (event.command === "show-popover") { /* Popover shown */ }
      // ...
    });
  });

  カスタムコマンド：

  カスタムコマンド（例えば、

  ）は、拡張機能を可能にします。--spin-me-a-bit

  将来のサポート：

  最初は

  とポップオーバーに焦点を合わせていましたが、<dialog></dialog>、<details></details>、<input type="color">、およびフルスクリーンコントロールの将来のサポートが予想されます。 <video></video>

  メリット：

  InvokerコマンドはJavaScriptを削減し、イベントのような取り扱いを提供し、既存のAPIの代替相互作用方法を提供します。 既存の機能を改良および強化します

以上がInvokerコマンド：ダイアログ、ポップオーバーなどを操作する追加の方法？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。