title: Web Components: setter not being called
body: <p>Say I have a Web Component:</p>
  
  <pre><code>customElements.define("custom-list", class CustomList extends HTMLElement {
    get filter() {
      console.log("get filter");
      return this.getAttribute("filter");
    }
  
    set filter(value) {
      console.log("set filter");
      this.setAttribute("filter", value);
    }
  });
  </code></pre>
  
  <p>I wanted to use the setter method to do some initial attribute validation, but the setter never gets called. I tried setting the attribute through the HTML:</p>
  
  <pre><code>&lt;custom-list filter="some value"&gt;&lt;/custom-list&gt;
  </code></pre>
  
  <p>Only when I use JavaScript to set a property programmatically does the setter get called:</p>
  
  <pre><code>var list = document.querySelector("custom-list");
  list.filter = "some value";
  
  list.setAttribute("filter", "some value"); // DOESN'T WORK EITHER
  </code></pre>
  
  <p>So, it seems like setting attributes through the HTML or using <code>setAttribute</code> doesn't trigger the setter, which I partly can understand. My questions are:</p>
  
  <ul>
  <li>Is the setter only necessary when I want to set <em>properties</em> programmatically?</li>
  <li>How could I do initial validation of an attribute? In the <code>connectedCallback</code>? Say I want to only accept a certain string, how would I detect that?</li>
  <li>Since the property <code>filter</code> gets populated anyway, do I need the setter if I don't use JavaScript to set my attributes?</li>
  </ul>