1. 開発者向けのウェブ技術
  2. Web API
  3. ShadowRoot
  4. delegatesFocus

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

ShadowRoot: delegatesFocus プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2021年11月以降、すべてのブラウザーで利用可能です。

delegatesFocus は ShadowRoot インターフェイスの読み取り専用プロパティで、シャドウルートがフォーカスを委任する場合は true、そうでなければ false を返します。

true の場合、シャドウ DOM のフォーカスを受け取れない部分がクリックされるか、ホスト要素に対して .focus() が呼び出されると、フォーカスを受け取ることができる最初の部分がフォーカスを受け取り、シャドウホストが :focus のスタイルになります。

キーボードのユーザー（スクリーンリーダーを使用するユーザーも含む）にとっては、フォーカスが特に重要です。 delegatesFocus の既定の動作は、最初のフォーカス可能な要素にフォーカスを当てるというものです。これは、その要素がタブ順序の一部として意図されていない場合（例えば、tabindex="-1" の要素）や、より「重要な」フォーカス可能な要素に初期フォーカスを当てるべき場合（例えば、最初のテキストフィールドをその前にある「閉じる」ボタンより優先させるなど）には望ましくない場合があります。このような場合、初期フォーカスを受け取る要素に autofocus 属性を指定することができます。 autofocus 属性は、アクセシビリティに関する課題を引き起こす可能性があるため、使用する際には注意が必要です。例えば、DOM の順序が後にある要素にフォーカスが設定されているために気づかないような重要なコンテンツを回避するといった課題です。

このプロパティ値は、元々、Element.attachShadow() に渡すオブジェクトの delegatesFocus プロパティを使用するか、またはシャドウルートを宣言的に作成する際の <template> 要素の shadowrootdelegatesfocus 属性を使用して設定します。

値

シャドウルートがフォーカスを譲る場合は true、そうでない場合は false。

例

js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;

// ...

// Does it delegate focus?
let hostElem = shadow.delegatesFocus;

<template> のドキュメント内のフォーカスのｐ譲渡を伴う宣言的シャドウ DOMの例では、フォーカスを譲ることの効果が示されています。

仕様書

仕様書
DOM
# shadowroot-delegates-focus

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告