Re: [webcomponents] [Shadow] activeElement behavior seems to break encapsulation (#358)

`{Document,ShadowRoot}.activeElement` is meant to know which element has the focus, thus having to search through elements using `isFocused` sounds weird.

For styling in the toolbar-pane example, maybe using `:focus` pseudo class is not enough because you want to style non-focused parts differently when a specific part gets focus?

In that case you need to listen to `focus` event for the specific part then handle the styling in the listener.

```html
<toolbar-pane>
  <#shadow>
    <button id="button">
    <slot name="inputs"></slot>
  </#shadow>
  <input id="x" slot="inputs" button-color="#333">
  <input id="y" slot="inputs" button-color="#ff0">
  <input id="z" slot="inputs" button-color="#0cc">
</toolbar-pane>
```

Let's say `#button` changes its color according to the focused node's attribute.
To do that synchronously when any of the `<input>`s above gets newly focused, you need to have `focus` event listener for these, because `<slot>` never gets focused. And that's enough and you don't need `ShadowRoot.activeElement` point to `<slot>`.

If you are saying that you need an API to determine if focus is inside the component, including distributed nodes in O(1) way, it might be okay.  But then what is the notification mechanism that a distributed node gets focused for the component?

---
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/358#issuecomment-181279473