Polymer 1.0: Do <script> tags do inside or outside of <dom-module>?

Question

Question

What is the "best" <script> tag placement method?

• Inside the <dom-module> ?

or

• External <dom-module> ?

Also answer:

• Why?
• What is the source of your answer?
• What are the disadvantages of doing this the “wrong” way?

---

Set for the manufacture of polymeric materials: EXTERNAL

In the Starter Star collection, the my-list.html and my-greeting.html files place the <script> outside of the <dom-module> .

Like this:

 <dom-module> <style>...</style> <template>...</template> <dom-module> <script>...</script> 

---

Other experts: INSIDE

However, I have heard and seen some examples from Google employees and Google developers that suggest that <script> tags appear inside <dom-module> .

Like this:

 <dom-module> <style>...</style> <template>...</template> <script>...</script> <dom-module> 

Answer 1

The correct answer is that it does not matter. Although the documentation is valid, as @Mowzer noted, this is just an example, not a definition. At least some actual polymer elements, such as e. Mr. iron-image have it outside of the dom module.

The connection between the dom module and the constructor constructor of an object is established using the 'is' property of the object passed to the Polymer constructor and the id attribute of the dom module.

From the Local DOM guide :

Give <dom-module> the id attribute that corresponds to its elements, is a property and places inside <dom-module>. The polymer automatically clones this template content into local DOM elements.

As an additional note, you can also successfully use <script src = "external.js"> </script> to separate html from JS - I just guess that this is one of the possible reasons for this question. The only drawback to this (AFAIK) is that in this case, the vulcanized version of your element will display incorrect (offset) line numbers of code for JS errors.

Answer 2

It seems that the <script> tags should be inside the <dom-module> .

In this definition, in the developer's guide .

Item Definition

 <dom-module id="element-name"> <template> <style> /* CSS rules for your element */ </style> <!-- local DOM for your element --> <div>{{greeting}}</div> <!-- data bindings in local DOM --> </template> <script> // element registration Polymer({ is: "element-name", // add properties and methods on the element prototype properties: { // declare properties for the element public API greeting: { type: String, value: "Hello!" } } }); </script> </dom-module>