<title>&lt;datalist-&gt;</title>

<script src=/snuggsi.es></script>
<script name=polyfill src=https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0/webcomponents-hi-ce.js></script>

<link rel=stylesheet href=https://devpunks.herokuapp.com/typography.css>

<!-- import works inline body -->
<link rel=import href=/examples/header-group>

<header-group>
  <h2 slot=header>&lt;datalist-&gt;</h2>
  <a  slot=subheader title='See more component examples' href=/examples>See more component examples</a>
</header-group>

<datalist->
  <datalist>
  <template name=options>
    <option value={value}>{name}
  </template>
  </datalist>
</datalist->

<script>

  Element `datalist-`

  (class extends HTMLElement {

    initialize () {
      this.context
        .options = [
          { name: 'Snuggs', value: 'foo@bar.com' }
        , { name: 'Kage', value: 'baz@bat.com' }
        ]
    }

    onidle () {
      console.log (this.selectAll `option`)
    }

    get options ()
      { return this.context.options }
  })
</script>

<script src=/browser-sync.es></script>

<title>&lt;datalist-&gt;</title>

<script src=/snuggsi.es></script>
<script name=polyfill src=https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0/webcomponents-hi-ce.js></script>

<link rel=stylesheet href=https://devpunks.herokuapp.com/typography.css>

<!-- import works inline body -->
<link rel=import href=/examples/header-group>

<header-group>
  <h2 slot=header>&lt;datalist-&gt;</h2>
  <a  slot=subheader title='See more component examples' href=/examples>See more component examples</a>
</header-group>

<input list=foo>

<datalist- id=foo>
  <datalist>
  <template name=options>
    <option value={value}>{name}
  </template>
  </datalist>
</datalist->

<script>

  Element `datalist-`

  (class extends HTMLElement {

    initialize () {
      this.context
        .options = [
          { name: 'Snuggs', value: 'foo@bar.com' }
        , { name: 'Kage', value: 'baz@bat.com' }
        ]
    }

    onidle () {
      console.log (this.selectAll `option`)
    }

    get id () {
      return this.getAttribute `id`
    }

    get options ()
      { return this.context.options }
  })
</script>

<script src=/browser-sync.es></script>

Add id attribute to datalist-
Add id attribute to datalist-
