Re: [w3c/webcomponents] :focus behavior of delegatesFocus:true will be confusing for users (#554)

The original idea was `:focus` to be able to construct `<input type="date">`.

If an author uses custom '<date-input>', then it can decorate the element `date-input:focus { ... }`
when any of the element inside `<date-input>` has focus.

And for `<date-input>` component author, within the component it can style its inner element
like `span#time-field:focus { ... }`.

So conceptually, the outermost element should be styled as if it were a regular HTML element,
regardless of the internal state (which specific element in the component is focused) via `:focus`.

The element with `delegatesFocus=true` shadow DOM *is* focusable, although `.focus()` or
tabbing behavior is customized.

I think the problem here is UA stylesheet's `:focus { outline: ... }` is applied to inner focusable
elements.  So currently the advice would be to have a custom `:focus { outline: none }` or
something inside Shadow DOM's style.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/554#issuecomment-242262673