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