title: Seperating HTML and CSS from Javascript Lit Element
body: <p>We are working with Lit Element and our component files are getting rather large because we have to write styling and html within the .js file. Is there a way to split them in separate files and then import them into our components? What would be the best approach to doing so? HTML and CSS especially are making the workflow difficult for us since our files are getting too bloated.</p>
  
  <p><strong>Update</strong>: Supersharp's advice helped me seperate the CSS, and the html template but I am having issue binding the html template with specified properties. I have a service file which is making an XML request for a file i specified, and them I am importing it in my component file. Here is my component:</p>
  
  <pre><code>import { LitElement, html} from '@polymer/lit-element';
  
  import HtmlLoader from './Service/HtmlLoader';
  
  class TestAnimatedButtonElement extends LitElement {
  
    static get properties() {
      return {
        _text: {
          type: String
        }
      }
    }
  
    constructor() {
      super();
      this.htmlTemplate = HtmlLoader.prototype.getHtmlTemplate('/src/Components/ExampleElements/test-animated-button-element.html');
    }
  
    render(){
      this.htmlTemplate.then( template =&gt; this.shadowRoot.innerHTML = template)
      return html( [this.htmlTemplate] );
    }
  
    handleButton(e) {
      //e.preventDefault();
      console.log('Button pressed');
    }
  }
  customElements.define('test-animated-button-element', TestAnimatedButtonElement);
  </code></pre>
  
  <p>And this is my html file: </p>
  
  <pre><code>&lt;link rel="stylesheet" href="src/Components/animatedButton/animated-button-element.css"/&gt;
  &lt;a href="#" class="btn btn--white btn--animated" @click="${(e) =&gt; this.handleButton(e)}"&gt;${this._text}&lt;/a&gt;
  </code></pre>
  
  <p>And this is the service file I am using for making XMLHttpRequest:</p>
  
  <pre><code>export default class HtmlLoader {
  
      xhrCall(url){
        return new Promise((resolve, reject) =&gt; {
          const xhr = new XMLHttpRequest();
          xhr.open("GET", url);
          xhr.onload = () =&gt; resolve(xhr.responseText);
          xhr.onerror = () =&gt; reject(xhr.statusText);
          xhr.send();
        });
      }
  
      getHtmlTemplate(url) {
         return this.xhrCall(url);
      }
  
  }
  </code></pre>