W3C home > Mailing lists > Public > www-style@w3.org > March 2015

[css-selector] :focus and shadow host

From: 河内 隆仁 <kochi@google.com>
Date: Thu, 19 Mar 2015 16:16:43 +0900
Message-ID: <CADP2=hr20h1rNVhBNVZL1vuizd239P-7f-zYRN9NXGO4n0_YQQ@mail.gmail.com>
To: www-style@w3.org
Hi,

I've been working on making custom elements/shadow dom compatible with
native elements, and currently working on focus stuff.

The primary motivation for us is, to make a custom <input type="date"> with
web components, for example.

See the following example:
http://jsbin.com/mupekazigo/1/edit
(the background turns yellow when it gets focus)

<input type="date"> is implemented in Chrome using shadow dom, and
the actual editing element is within the shadow tree, but "input:focus"
matches
when its descendant element in the shadow tree is focused.

We would like to make custom-date-input:focus also match without breaking
existing components.

What we'd like to propose is, that making :focus on shadow host match when
its
inner element gets focus, on a condition that the host's tabindex >= 0 and
its
tabStop (which is new [1], basically HTML spec's "tabindex focus flag[2]")
is *"false"*.

Currently, :focus pseudo class on shadow host is defined not to be
in the focused state even when its inner element is focused:
http://dev.w3.org/csswg/selectors-4/#the-focus-pseudo

(Note that :focus-within, :hover, and :active for shadow host works when
its inner element gets its matching state.)

Prior to [1] draft, there are only 2 states for any element:

1. tabindex >= 0 and tabStop = true
2. tabindex = -1 and tabStop = false

but shadow host can be in the third state

3. tabindex >=0 and tabStop = false

where tabbing focus navigation will obey the "tabindex" order but actual
focus is delegated
into its inner focusable element.

The shadow-host:focus matching behavior only happens in the 3rd state.

Of course, functionally speaking :focus-within can do what we want, but in
that case
<input type="date"> and <custom-date-input> are not interchangeable
(:focus-within
works for both, :focus works only for <input>).

Any comments are welcome.

[1] TabIndex Focus Navigation Explainer
https://docs.google.com/a/chromium.org/document/d/1k93Ez6yNSyWQDtGjdJJqTBPmljk9l2WS3JTe5OHHB50/edit?pli=1#
[2]
https://html.spec.whatwg.org/multipage/interaction.html#specially-focusable

-- 
Takayoshi Kochi
Received on Thursday, 19 March 2015 07:17:31 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:30 UTC