<title>snuggsi - Input / Output</title>

<meta charset=UTF-8>
<meta name=viewport content=width=device-width,initial-scale=1>

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

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

<input-output>

<output for=message>{echo}</output>

<input id=message placeholder='HELLO…hello…'>

<script>

Element `input-output`

(class extends HTMLElement {

  oninput () { }

  get echo () // tokenized property
    { return this.select ('input#message').value || '…' }
})

</script>

</input-output>

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


<title>snuggsi - Input / Output</title>

<meta charset=UTF-8>
<meta name=viewport content=width=device-width,initial-scale=1>

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

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

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

<header-group>
  <h2 slot=header>&lt;input-output&gt;</h2>
  <a  slot=subheader Title='See more componentexamples' href=./>See more component examples</a>
</header-group>

<input-output>

<output for=message>{echo}</output>

<input id=message placeholder='HELLO…hello…'>

<script>

Element `input-output`

(class extends HTMLElement {

  oninput () { }

  get echo () // tokenized property
    { return this.select ('input#message').value || '…' }
})

</script>

</input-output>

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


Add header group example component to input output
Add header group example component to input output
