Polymer 1.0 Data Binding with inline script tags

Question

Is this possible to have data binding inside an inline script tag? For example:

<script src="{{url}}" class="{{klass}}"></script>

Polymer({
 is: "test-app",
 ready: function() {
    url = "http://google.com/js/some-file.js",
    klass = "script-class"
 }
});

Based on the Polymer 1.0 Data Binding docs , I could not come up with anything better.

I have edited this post to 100% clarity of what I want to achieve. I want to use Strip Embedded Checkout :

<form action="" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_blahblah"
    data-amount="2000"
    data-name="Demo Site"
    data-description="2 widgets ($20.00)"
    data-image="/128x128.png">
  </script>
</form>

Mason's answer and Anthony's clue led me to this:

<dom-module id="my-app>
 <template>
   <form action="" method="POST">
        <script
          src$="{{url}}" class$="{{klass}}"
          data-key$="{{key}}"
          data-amount$="{{total}}"
          data-name$="{{dname}}"
          data-description="2 widgets ($20.00)"
          data-image="/128x128.png">
        </script>
      </form>
 </template>
 <script>
   Polymer({
        is: "my-app",
        properties: {
           selection: {
            type: String,
            observation: "selectionChanged"
           }
        },
    ready: function() {
          this.url = 'https://checkout.stripe.com/checkout.js';
          this.klass = 'stripe-button';
          this.key = 'pk_test_blahblah';
          this.dname = 'Demo';
          // this.total = "333"; // this value is not static
        },
    selectionChanged: function () {
      if (true) {
       this.total = 50; // I need this to assign to "{{total}}" in the template.
      }
    };
 </script>
</dom-module>

How can I get the value of this.total to be assigned to data-amount in the script tag of Stripe's?

See Plunkr

Answer 1

I did a Plunk and it seems it's not possible to do this.

<dom-module id="my-element">
  <template>
    <script src="{{url}}"></script>
    Try to load <span>{{name}}</span>
  </template>
  <script>
  Polymer({
    is: 'my-element',
    ready: function() {
      this.name = 'JQuery';
      this.url = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js';

      this.async(function() {
        this.name = 'AngularJs';
        this.url = 'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js';
      }, 5000);
    }
  });
  </script>
</dom-module>

The first loading works but when the bind value has changed, Polymer does not create a new script tag for you. You can create a script tag by using the DOM.

Edited:

Initializing the script tag's attributes without "ready" method.

<template>
  <script src="{{_url}}"></script>
</template>
<script>
Polymer({
  is: 'my-element',
  properties: {
    _url: {
      type: String,
      value: 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'
    }
  }
})
</script>

Or using hosted attributes

<template>
  <script src="{{url}}"></script>
  Try to load <span>{{name}}</span>
</template>
<script>
Polymer({
  is: 'my-element',
  hostAttributes: {
    url: {
      type: String
    }
  }
})
</script>

and in the parent element:

<my-element url="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></my-element>

By using hostAttributes you'll see the url in the DOM.