<x-ample answers="implemented,because,is,going">This is a whole bunch of text that is going to be in the middle here but yet we won't see it because of the slot not being implemented</x-ample>

x-ample:not(:defined) {
  display: none;
}
x-ample {
  max-width: 50vw;
  margin: 16px auto;
}

import { LitElement, css, html } from "https://unpkg.com/[email protected]/index.js?module";

class XAmple extends LitElement {
  static get tag() {
    return "x-ample";
  }
  constructor() {
    super();
    this.answers = "";
    this.validAnswers = [];
    // parse the text here
    this.textAry = this.innerText.split(/\s+/g);
    this.innerText = "";
  }
  static get styles() {
    return [css`
      :host {
        display: block;
        padding: 16px;
        margin: 16px;
        border: 2px solid black;
      }
      span {
        display: inline-flex;
        font-size: var(--x-ample-font-size, 24px);
        padding: 2px;
        margin: 0 2px;
      }
      span:hover,
      span:focus
      {
        outline: 2px dashed blue;
        cursor: pointer;        
      }
      span[data-selected] {
        outline: 2px solid purple;
      }
      span[data-selected]:hover,
      span[data-selected]:focus
      {
        outline: 2px solid blue;
      }
      span[data-status="correct"] {
        outline: 2px solid green;
      }
      span[data-status="correct"]::after {
        content: "+1";
        font-size: 14px;
        color: green;
        font-weight: bold;
        border-radius: 50%;
        border: 2px solid green;
        padding: 4px;
        margin-left: 8px;
        line-height: 14px;
      }
      span[data-status="incorrect"] {
        outline: 2px solid red;
      }
      span[data-status="incorrect"]::after {
        content: "-1";
        font-size: 14px;
        color: red;
        font-weight: bold;
        border-radius: 50%;
        border: 2px solid red;
        padding: 4px;
        margin-left: 8px;
        line-height: 14px;
      }
      .buttons,
      .correct {
        margin: 8px;
      }
    `];
  }
  static get properties() {
    return {
      textAry: { type: Array },
      answers: { type: String, reflect: true},
      validAnswers: { type: Array}
    };
  }
  
  updated(changedProperties) {
    changedProperties.forEach((oldValue, propName) => {
      if (propName === "textAry") {
        this.rebuildContents(this[propName]);
      }
      if (propName === "answers" && this[propName]) {
        this.validAnswers = this[propName].split(",");
        // unset so that people can't cheat
        this.answers = null;
      }
    });
  }
  
  rebuildContents(ary) {
    // wipe out inner
    this.shadowRoot.querySelector("#area").innerHTML = "";
    ary.forEach((word) => {
      let span = document.createElement("span");
      span.innerText = word;
      span.setAttribute("tabindex", "-1");
      span.addEventListener("click", this.clickWord.bind(this));
      this.shadowRoot.querySelector("#area").appendChild(span);
    });
  }
  clickWord(e) {
    const el = e.target;
    if (el.getAttribute("data-selected")) {
      el.removeAttribute("data-selected")
    }
    else {
      el.setAttribute("data-selected", "data-selected");
    }
  }
  testAnswers(e) {
    const selected = this.shadowRoot.querySelectorAll("#area span[data-selected]");
    console.log(selected);
    for (var i=0; i < selected.length; i++) {
      const el = selected[i];
      if (this.validAnswers.includes(el.innerText)) {
        el.setAttribute("data-status", "correct");
      }
      else {
        el.setAttribute("data-status", "incorrect");        
      }
    }
  }
  
  render() {
    return html`
    <div id="area"></div>
    <div class="buttons">
      <button @click="${this.testAnswers}">Test</button>
    </div>
    <div class="correct">
      <h1>Correct Answers (in .map)</h1>
      <ul>
      ${this.validAnswers.map((item,i) => html`<li data-index="${i}">${item}</li>`)}
      </ul>
    </div>
    `;
  }
}
customElements.define(XAmple.tag,XAmple);