title: How to provide input to javascript web components from angular app
body: <p>I have create JavaScript WebComponent using HTMLElement class. And build it using npx webpack.
  Now trying to use that component in Angular 7 project but when I try to provide input from angular by creating a variable it doesn't work but when I give direct string input it works.
  Below is my web component. Basically a loader with show/hide input.</p>
  
  <pre><code>if (typeof require !== 'undefined') {
      require('../css/styles.css');
  }
  
  class Loader extends HTMLElement {
      constructor() {
          super();
          this.initialized = false
      }
  
      static get observedAttributes() {
          return ['data-input'];
      }
  
  
      attributeChangedCallback(name, oldValue, newValue) {
          console.log(name, newValue);
  
          if (name == 'data-input') {
              if (newValue == 'show' &amp;&amp; this.shadowRoot) {
                  this.shadowRoot.getElementById('my-component').className = 'show';
              } else if (this.shadowRoot) {
                  this.shadowRoot.getElementById('my-component').className = 'hide';
              }
          }
          if (!this.initialized) {
              this.buildElement();
              this.initialized = true
          }
      }
  
      buildElement() {
          const shadowRoot = this.attachShadow({mode: 'open'});
          let style = document.createElement('style');
          let cssFile = ''
          if (typeof require !== 'undefined') {
              cssFile = require('../css/styles.css');
          }
          style.textContent = cssFile; 
          shadowRoot.appendChild(style);
          shadowRoot.appendChild(this.createElement());      
      }
  
      createElement() {
          const container = document.createElement("DIV");
          container.id = "my-component";
          container.className = "hide";
          const loader = document.createElement("DIV");
          loader.className = "loader";
          container.appendChild(loader);
          const locker = document.createElement("DIV");
          locker.className = "locker";
          container.appendChild(locker);
          return container;
      }
  }
  
  window.customElements.define('my-component', My);
  </code></pre>
  
  <p>This works.</p>
  
  <pre><code>&lt;my-component data-input="show"&gt;&lt;/my-component&gt;
  </code></pre>
  
  <p>But this do not work.</p>
  
  <pre><code>&lt;my-component data-input="{{showHideInput}}"&gt;&lt;/my-component&gt;
  </code></pre>