[w3c/webcomponents] How should autofill work for inputs generated inside shadow roots (#572)

I'm currently trying to build a form using custom elements, where each custom element generates an `<input />` inside the custom element shadow root.

Something like this:

```html
<form>
  <my-input>
    <!-- shadow root -->
      <input type="text" name="fname" id="fname" />
  </my-input>
  <my-input>
    <!-- shadow root -->
      <input type="text" name="lname" id="lname" />
  </my-input>
  <my-input>
    <!-- shadow root -->
      <input type="text" name="email" id="email" />
  </my-input>
  <input type="submit" value="submit" />
</form>
```

The above example doesn't seem to trigger autofill behaviour (i.e. loading the first name, last name, email from the browser profile).

Is there a recommended way of building custom element form inputs with shadow DOM while retaining autofill behaviour?

![codepen](https://cloud.githubusercontent.com/assets/1089897/18732941/51692288-80aa-11e6-8245-a89381936a22.gif)

I've raised a Chrome [issue](https://bugs.chromium.org/p/chromium/issues/detail?id=649162) for this with an example [codepen](http://s.codepen.io/bgummeratlassian/debug/Egkarq) (you'll need to view that in Chrome canary), but I'm not 100% sure yet whether this is a feature or drawback in shadow DOM.

P.S. the above code example wouldn't submit any values but hopefully https://github.com/w3c/webcomponents/issues/187 will fix that

-- 
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/572