Script functions not encapsulated in shadow DOM, all anchored to main DOM

[Just.A.Guy]

What I was expecting:

    each function definition would be anchored within its owning document fragment.

    (in a way similar to the way CSS styles are encapsulated).

What I found:

    all function definitions (script files and inline) are anchored in the main HTML DOM (document).

    even those brought in via IMPORTs, or as part of a custom element's TEMPLATE" definition.

    So if you have the same two versions of a function with the same name, the definition that

    gets used is the last one effectively defined. 

My test:

     1) created a simple IMPORT_1 html file.

         a) it contains a button and a textarea.

         b) component ready listener routine

             connects a click listener to the button

             and defines the associated textarea element

             node as an attribute of the button element.

         c) the click event listener, obtains the location

             of the associated text area, passes this

             element to a function named "import_function"

         d) The IMPORT_FUNCTION, just adds a static

             text string to the end of the text area.

         e) all of the self-registration for "Polymer" was setup.

      2) I duplicated the IMPORT_1.html file and

          called it IMPORT_2.html.

          I changed the text string in IMPORT_FUNCTION

          to indicated that it was coming for IMPORT_2's definition.

      3) I created a main document 

         a) it has the same button and text area as the custom

             element's template, with names changed not to 

             collide with the other custom elements.

             only IMPORT_FUNCTION name was unchanged,

             but the text was changed to indicate it came from main document.

         b) just below the Main button/textarea I included

             calls to IMPORT-1 and IMPORT-2 element

         c) in the header section, the appropriate code to import

             the two custom elements was included.

      4) ran the Main html document using Web-node to

          a chrome browser (ver 33). 

      5) When pressing each of the buttons, I received

          the same message telling me the IMPORT-2

          version of IMPORT_FUNCTION was being 

          shared by all three sets of code.

      Test #2

         I modified IMPORT-1's template. I moved the

         click_event and IMPORT_FUNCTION into the

         template area of the custom element.

        

         Reran the test. This time, all text areas

         reported that IMPORT_FUNCTION was

         all the same but coming from IMPORT-1's

         definition. 

     For me, this means:

     1) even though, I include a function anchor in 

         a custom elements prototype definition,

         if the function definition is not contained

         within an enclosing scope, its definition

         is global and subject to global corruption. 

[Scott Miles]

For each import to introduce a new global scope would be extraordinarily costly. Unless you employ iframes or webworkers, it's true and normal that there is only one global scope.

>>  For me, this means:

>>      1) even though, I include a function anchor in 

>>          a custom elements prototype definition,

>>          if the function definition is not contained

>>          within an enclosing scope, its definition

>>          is global and subject to global corruption. 

This is an incorrect conclusion. Functions attached to a prototype are only overridable on that prototype. They are not part of the global scope, by definition. 

Here are some possibilities:

(1) 

<script>

Polymer('x-foo', {

  // nobody can corrupt this function without reaching

  // into x-foo's prototype on purpose
  myFunction: function() {

  }

});

<script>

(2) 

<script>

// this function is global by normal JavaScript rules

// somebody could override this function

function MyFunction() {};

Polymer('x-foo', {

  // nobody can override this function without reaching

  // to x-foo's prototype on purpose; otherwise it continues to point

  // to the function above no matter what happens to the symbol

  // MyFunction in the global scope
  myFunction: MyFunction

});

<script>

(3) 

<script>

(function() {

// this function is private to this closure, nobody can touch it

function MyFunction() {};

Polymer('x-foo', {

  // nobody can corrupt this function without reaching

  // to x-foo's prototype on purpose

  myFunction: MyFunction

});

})();

<script>

(4) 

<script>

// this function is global by normal JavaScript rules

// somebody could override this function

function MyFunction() {};

Polymer('x-foo', {

  // nobody can corrupt this function without reaching

  // to x-foo's prototype on purpose

  myFunction: function() {

    // this will call whatever function is at global MyFunction, 

    // which could have been clobbered from what I expect
    MyFunction();

  }

});

<script>

HTH,

Scott

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/99035207-4f61-4716-ac9a-f420bd2b7ce8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.