<tk-character-counter
  count-down="true"
  input-size="medium"
  max-length="200"
  placement="bottom"
  text="Updated model value"
  warning-text="Try breaking down larger tasks and questions"
>
  <label class="form__label form__label--stacked">
    Task
    <textarea
      oninput="characterCountExampleChanged(event)"
      class="form-input form-input--textarea"
    ></textarea>
  </label>
</tk-character-counter>

<script>
  const characterCounterElement = document.getElementsByTagName('tk-character-counter')[0];
  const characterCountExampleChanged = (event) => {
    characterCounterElement.setAttribute('text', event.srcElement.value)
  }
</script>