title: Lit-Element doesn't let me set property value in html
body: <p>I have a issue with a as specific element I'm working on. And for some reason this one doesn't let me specify any property values on the html tag.</p>
  
  <p>If I specify defaults in the contructor, then the element works fine with those defaults, but I cannot override the defaults via declarative html.</p>
  
  <p>This is the element:</p>
  
  <pre><code>class OstinatoFetchTriggers extends LitElement {
    static get properties() {
      return {
        /**
          * The query selector for the `ostinato-fetch` element to use when
          * making the request.
          */
        xhrSelector: { type: String },
  
        /**
        * Elements with the trigger selector will have their click event
        * intercepted and will make the request via ostinato-fetch
        */
        triggerSelector: { type: String },
      };
    }
  
  
    constructor() {
      super();
      this.xhrSelector = '#xhrContent';
      this.triggerSelector = '[xhr-link]';
    }
  
    connectedCallback() {
      super.connectedCallback();
  
      // The output for console log below is null or whatever the default was in the contructor.
      console.log(this.triggerSelector);
  
      var triggerList = document.querySelectorAll(this.triggerSelector);
      triggerList.forEach((trigger) =&gt; {
        trigger.addEventListener('click', this._handleXhrClick.bind(this));
      });
    }
  
    disconnectedCallback() {
      super.disconnectedCallback();
      var triggerList = document.querySelectorAll(this.triggerSelector);
      triggerList.forEach((trigger) =&gt; {
        trigger.removeEventListener('click', this._handleXhrClick.bind(this));
      });
    }
  
    _handleXhrClick(ev) {
      ev.preventDefault();
      this.triggerRequest(ev.currentTarget.href);
    }
  
    triggerRequest(href) {
      document.querySelector(this.xhrSelector).fetch(href);
    }
  }
  
  customElements.define('ostinato-fetch-triggers', OstinatoFetchTriggers);
  </code></pre>
  
  <p>I try to use the element above like this: <code>&lt;ostinato-fetch-triggers xhr-selector="#somethingElse"&gt;&lt;/ostinato-fetch-triggers&gt;</code>.</p>
  
  <p>What I expect is that the xhrTriggers property in the element should be <code>#somethingElse</code>, but this is not the case. It basically just uses the default from the constructor.</p>