ndf-elements/src/templates/my-text-to-speech.tpl.html

My collection of useful custom elements.

<meta name="robots" content="noindex">

<template>
  <style>
    button,
    select {
      font: inherit;
      padding: .5rem;
    }
    button {
      padding: .2rem 2rem;
    }
    select {
      margin: 0 .5rem;
      min-width: 9rem;
      max-width: 100%;
    }
    pre {
      font-size: small;
      line-height: 1.2;
    }
    label,
    [ contenteditable = true ] {
      X-padding: 0 .2rem;
      outline-offset: .3rem;
    }
  </style>

  <div id="utterance" contenteditable="true" aria-label="Text to speak">
    <slot> Hello! You can edit me. </slot>
  </div>
  <!-- <textarea><slot></slot></textarea> -->

  <p>
    <label id="vox">Voice:<select></select></label>
    <button> Speak </button>
  </p>

  <details open>
    <summary> Voices </summary>
    <pre id="log"><pre>
  </details>
</template>