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

Ah, okay, thanks for the clarification.  Scratch my few comments above.

So does the conclusion below look good?

---
When you specify `delegatesFocus=true` on a shadow root, its shadow host matches `:focus` pseudo class when any shadow-including descendant of the shadow root has focus.
This means you can see multiple focus rings, if some style rule gives outline for `:focus'.

This can be avoided by giving an explicit style rule like:

>From outside shadow: `your-element:focus { outline: none }`
>From inside shadow: `:host(:focus) { outline: none }`

When both a component and its user specify the style, their precedence will be determined by [shadow cascading](https://drafts.csswg.org/css-scoping-1/#shadow-cascading) rule.

CSS `outline` property doesn't inherit, which is good because those rules do not affect other descendants accidentally.

Note: whether the style rule like above applies or not follows the rule of [cascading](https://drafts.csswg.org/css-cascade/#cascading), and for a rule in UA stylesheet with `!important`, for example, can have higher precedence and you may not be able to override.

-- 
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-243989461