ShadowRoot: delegatesFocus プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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の例では、フォーカスを譲ることの効果が示されています。

仕様書

Specification
DOM
# shadowroot-delegates-focus

ブラウザーの互換性

BCD tables only load in the browser