Script in component get messed up, any idea?

I created a component like 

  const TWITTER_TYPE = 'TWITTER';
  domc.addType(TWITTER_TYPE, {
    model: defaultModel.extend({
      defaults: {
        ...defaultModel.prototype.defaults,
        droppable: false,
        account: 'OntarioAlliance',
        widget_width: 425,
        widget_height: 525,
        traits: [
          { label: 'Account', name: 'account', changeProp: 1, },
          { label: 'Width', name: 'widget_width', type: 'number', changeProp: 1, },
          { label: 'Height', name: 'widget_height', type: 'number', changeProp: 1, }
        ],
        script: function() {
          if(this.innerHTML.length == 0){
            this.innerHTML=`<a class="twitter-timeline" data-width="426" data-height="525" data-dnt="true" href="https://twitter.com/{[ account ]}?ref_src=twsrc%5Etfw">Tweets by {[ account ]}</a>`;

            if(window.twttr && window.twttr.widgets)
              twttr.widgets.load();
            else
            (function(d, s, id) {       
              var js, fjs = d.getElementsByTagName(s)[0]; 
              if (d.getElementById(id)){
                twttr.widgets.load();
                return;
              }
              fjs = d.getElementsByTagName(s)[0];
              js = d.createElement(s); js.id = id; 
              js.src = "https://platform.twitter.com/widgets.js"; 
              fjs.parentNode.insertBefore(js, fjs);
              }(document, "script", "twitter-widgets"));  
          }
        }
      },
    }, {
      isComponent(el) {
        if(el.getAttribute &&
          el.getAttribute('data-gjs-type') == TWITTER_TYPE) {
          return {
            type: TWITTER_TYPE
          };
        }


but after I put it in page and check the export html, I see code like below


<div id="idtj">
</div>
<script>var items = document.querySelectorAll('#idtj');
  for (var i = 0, len = items.length; i < len; i++) {
    (function(){
      0==this.innerHTML.length&&(this.innerHTML='<a class="twitter-timeline" data-width="426" data-height="525" data-dnt="true" href="https://twitter.com/OntarioAlliance?ref_src=twsrc%5Etfw">Tweets by OntarioAlliance</a>',window.twttr&&window.twttr.widgets?twttr.widgets.load():function(e,t,n){
        var a,i=e.getElementsByTagName(t)[0];
        if(e.getElementById(n))return void twttr.widgets.load();
        i=e.getElementsByTagName(t)[0],a=e.createElement(t),a.id=n,a.src="https://platform.twitter.com/widgets.js",i.parentNode.insertBefore(a,i)}
                                 (document,"script","twitter-widgets"))}
     .bind(items[i]))();
  }
</script>

See the code after the function(), it messes the page up.

Any idea?